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随 着 智能 手机 和 各 种 移动 终端 设备 的 普及 ，APP 作为 第 三 方 应 用 程序 已 逐渐 把 人 们 带 入 一 个 习惯 
使 用 APP 客户 端 上 网 的 时 期 。 目 前 ， 各 种 APP 应 用 层出不穷 , APP UI 设计 师 也 成 为 了 人 才 市 场 上 十 z 
分 紧俏 的 职业 。 | 





本 书 是 一 本 专门 介绍 使 用 Photoshop 设计 制作 APP 元 素 的 图 书 。 全 书 分 为 6 章 ， 第 1 章 介 绍 了 [ 
APP UI 元 素 设计 基础 ， 帮 助 读者 了 解 APP UI 基础 以 及 使 用 Photoshop 绘制 基础 元 素 ; 第 2 章 ~ 第 4 | : 
章 介绍 了 APP 图 标 设计 、APP 按钮 设计 和 APP 导航 设计 ， 通 过 理论 知识 与 案例 制作 的 结合 逐一 讲解 丽 引 林寺 








这 些 APP 中 最 常见 的 元 素 ; 第 5 章 介绍 了 APP 其 他 元 素 的 设计 ， 包 括 表单 设计 、 对 话 框 设计 和 主页 | 
桌面 小 工具 设计 等 ， 前 面 章节 的 安排 使 读者 由 浅 及 深 逐 步 地 了 解 使 用 Photoshop 进行 APP 元 素 设 计 了 ”了 
的 设计 思路 和 制作 过 程 ; 第 6 章 介绍 了 APP 整体 框架 界面 设计 , 包括 界面 设计 基础 知识 , 以 及 系统 界面 、 性 
应 用 程序 界面 和 手机 主题 界面 的 制作 , 通过 完整 界面 的 制作 来 综合 前 面 各 章 知识 , 帮助 读者 巩固 学 习 ， Pe! 
并 能 将 理论 应 用 到 实际 工作 中 。 本 机 























讲 练 结合 ， 专 业 性 强 。 本 书 将 APP UI 元 素 设 计 的 相关 理论 与 实例 操作 相 结合 ， 不 仅 能 使 读者 学 
到 专业 知识 ， 也 能 在 实例 操作 中 掌握 实际 应 用 ， 全 面 掌握 APP UI 的 元 素 设 计 方 法 。 

案例 丰富 , 实 操 性 强 。 书 中 案例 涉及 APP 中 的 界面 元 素 设计 , 如 图 标 设计 、 按 钮 设计 、 导 航 设计 等 ， 
最 后 一 章 介 绍 了 完整 的 APP 界面 设计 ， 将 前 面 所 学 应 用 到 实际 操作 中 去 。 

创意 灵感 , 全 面 性 强 。 书 中 每 章 添加 了 “设计 师 心得 " 模块 , 全 面 讲 解 了 APP UI 设计 中 的 行业 知识 、 
准则 知识 ， 帮 助 读者 拓展 APP UI 的 相关 知识 。 

海量 资源 ， 轻 松 学 习 。 本 书 配套 光盘 中 包括 书 中 所 有 案例 的 相关 设计 素材 、 效 果 文 件 和 视频 教学 ， 
读者 可 以 通过 书 盘 结合 轻松 掌握 书 中 知识 。 

本 书 不 仅 适 合 APP UI 设计 爱好 者 ,以 及 准备 从 事 APP UI 设 计 的 人 员 , 也 适合 Photoshop 使 用 者 ， 
包括 平面 设计 师 、 网 页 设计 师 等 相关 人 员 , 同时 也 可 作为 大 中 专 相 关 专 业 及 培训 中 心 学 生 的 辅助 教材 。 
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本 书 由 众多 UI 设计 师 、 用 户 体验 设计 师 ， 以 及 设计 类 院 校 专家 、 教 授 共 同 策划 编写 。 其 中 第 1 
章 、 第 2 章 、 第 3 章 和 第 7 章 由 河北 工程 拉 术 高 等 专科 学 校 的 页 冬青 负责 主要 编写 工作 ， 共 约 25 万 
字 ; 第 4 章 、 第 5 章 、 第 6 和 章 和 第 8 章 由 河北 工程 技术 高 等 专科 学 校 的 刘 振 名 负责 主要 编写 工作 ， 共 
约 23 万 字 ; 其 他 相关 章节 的 内 容 整 理 和 案例 测试 工作 由 张 小 雪 、 何 溜 、 邹 国庆 、 姚 义 琴 、 江 涛 、 李 
雨 旦 、 乌 清华、 向 慧 芳 、 袁 圣 超 、 陈 浏 、 张 泥 、 李 佳 身 、 芭 凡 铭 、 谢 帆 、 周 娟 娟 、 张 静 玲 、 王 晓 飞 、 
张 智 、 席 海燕 、 宋 丽 娟 、 黄 玉 香 、 重 标 、 董 智 武 、 刘 静 、 王 绪 、 杨 挡 、 李 梦 瑶 、 黄 聪 聪 、 毕 绘 婷 、 李 
红 术 等 人 完成 。 全 书 由 页 冬青 和 刘 振 名 负责 统 稿 并 审读 。 

由 于 时 间 人 仓促、 作者 水 平 有 限 ， 书 中 不 足 之 处 在 所 难免 ， 欢 迎 广 大 读者 批评 指正 。 
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iD5 8 黄 话 重大 的 全 新 功能 ， 屠 妙 你 充分 发 握 iPod touch 
的 无 架 精 彩 。 开 在 ， 你 可 以 在 文本 信息 中 加 入 声色 和 视频 ， 
快 惠 对 照片 进行 精彩 蝙 锋 ， 逊 衣 追 知 自 己 的 阴 康 信息 。 丙 全 
新 的 文本 输入 据 到 功能 也 让 文字 输入 认得 格外 到 松 。 不 仅 如 
此 ， 开 发 者 们 还 司 以 更 加 肤 入 地 运用 更 多 工 具 开 发 比 以 往 更 


出 色 的 app 


et。 


进一步 了 解 IOS 8 的 功能 





、 
人 配备 一 系列 强大 App 
工作 竺 事 顺 手 ， 娱乐 即刻 上 手 。 
— 定 ) 





iMovie 、CGarageBand 、Pages 、Numbers 和 Keynote 畏 彩 更 性 以 往 ， 现 已 为 拇 台 购 买 的 
iPod touch 准备 总 绪 。 你 甘 需 时 开始 探 酒 创 仿 ， 高 允 工 作 * 你 迁 表 享 有 多 部 精彩 app， 用 以 收发 
电子 邮件 、 同 络 冲 浪 、 发 送 文 本 信息 、 反 行 FaceTime 视频 通话 ， 
甚至 还 有 一 莫 app 用 于 寻 执 新 的 app* 
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更 辩 gU| Photoshop 创意 全 p 所 未 设 计 从 入 门 到 精通 
me o ~O 


认识 APP UI 设计 








1 


ay 


< APP UI 是 指 可 移动 的 操作 系统 ( 包括 手机 和 平板 电脑 等 ) 和 UI 
Wy 设计 的 人 机 交互 、 操 作 逻 辑 、 界 面 美观 的 整体 设计 。UI| 设计 的 好 坏 
影响 了 一 款 APP 产品 的 成 败 ， 下 面 我 们 一 起 来 认识 APP UI 设计 。 


IE APP ul 设计 与 网 页 Ul 设计 的 区 别 


由 于 操作 的 媒介 不 同 ，APP UIl 设计 与 网 页 UI 设计 有 一 些 区 别 。 

《网 界面 空间 不 同 

APP Ul 和 网 页 UI 最 大 的 区 别 是 空间 不 同 。 网 页 的 空间 非常 大 ， 操 作 鼠 标 可 以 伍 看 非 
弟 多 的 信息 ， 而 手机 空间 有 限 ， 我 们 只 能 通过 上 下 滑动 来 奖 取 更 多 的 信息 ， 因 此 手机 上 的 
按钮 等 重要 控件 元 素 需要 放置 在 醒目 的 位 置 ， 以 方便 用 户 操 作 。 

BM 操作 习惯 不 同 

在 网 页 中 ， 我 们 可 以 利用 鼠标 进行 点 击 、 双 击 、 右 击 等 各 种 操作 ， 而 在 手机 上 我 们 
只 能 进行 点 击 ， 或 者 长 按 和 滑动 的 操作 ， 因 此 我 们 需要 按照 浏览 者 在 不 同 媒介 的 习惯 来 
定位 不 同 的 UI 设计 ， 从 而 更 好 地 引导 浏览 者 进行 浏览 等 相关 操作 ， 以 便 更 好 地 满足 浏览 
| 忆 本 | 

尼 马 精确 度 不 同 

我 们 知道 ， 在 网 页 上 鼠标 的 精确 度 是 非常 高 的 ， 即 使 再 小 的 东西 也 能 够 通过 点 击 或 者 
鼠标 拖 搜 来 实现 ， 而 且 精 确 率 非 常 高 。 但 是 在 手机 上 就 不 同 了 ， 通 常 需要 设计 一 个 精致 的 
按钮 ， 点 击 的 范围 最 好 大 一 些 ， 这 样 才 能 够 保证 按钮 的 精确 度 。 

二 按钮 位 置 不 同 

在 网 页 界面 中 ， 无 论 按 钮 在 屏幕 中 的 哪个 位 置 ， 对 于 操作 的 影响 都 不 是 很 大 ， 浏 览 
可 以 轻松 地 移动 鼠标 到 任何 想 去 的 位 置 ， 点 击 任何 需要 的 按钮 即 可 ， 因 此 我 们 可 以 看 到 大 
部 分 网 页 中 按钮 都 在 边缘 的 一 个 狭小 空间 内 。 

而 在 APP 界面 中 ， 设 计 者 需要 考虑 的 是 手机 的 使 用 环境 以 及 使 用 者 的 习惯 。 通 常人 
们 更 加 希望 单 手 操作 手机 ， 因 此 我 们 设计 的 按钮 更 多 地 置 于 屏幕 下 方 ， 或 左 、 右 手 大 拇指 
能 控制 到 的 区 域内 。 

团 按钮 状态 不 同 

网 页 中 的 按钮 通常 有 4 个 状态 ， 即 默认 状态 、 鼠 标 经 过 状态 、 鼠 标点 击 状态 、 不 可 用 
状态 。 而 APP 中 的 按钮 通常 只 有 3 个 状态 ， 即 默认 状态 、 点 击 状态 和 不 可 用 状态 。 在 手 
机 界面 中 ， 按 钮 需要 更 加 明确 、 指 向 性 更 强 。 


CE 也 APP ul 设计 流程 


任何 设计 都 需要 按 流 程 进 行 ，APP UI| 设计 也 不 例外 。 





全 产品 定位 

根据 产品 的 功能 分 析 不 同 场景 下 的 网 络 环境 、 光 线 和 使 用 条 件 等 ， 针 对 共性 因素 和 特 
定 因素 提供 相应 的 功能 和 界面 设计 。 

考虑 用 户 的 系统 体验 ,因为 用 户 在 使 用 其 他 同类 APP 软件 时 积累 了 大 量 的 使 用 经 验 ， 
并 且 自 觉 地 养 成 了 一 定 的 使 用 习惯 ， 因 此 用 户 的 习惯 十 分 重要 。 

国 风格 定位 

产品 定位 直接 影响 产品 的 风格 。 风 格 有 很 多 种 ， 例 如 扁平 化 的 还 是 立体 化 的 ， 卡 通 的 
还 是 清新 的 ， 如 图 1-1 所 示 。 选 择 一 种 主 颜色 以 及 相应 的 搭配 色彩 ， 需 要 符合 风格 定位 。 
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图 1-1 产品 风格 
产品 控件 设计 
对 产品 界面 中 的 菜单 、 按 钮 、 功 能 图 标 等 控件 进行 设计 ， 以 及 对 选用 何 种 控件 进 
析 研 究 ， 如 图 1-2 所 示 。 












TE :77 EE cm 
DOD oo00 
rr 





图 1-2 产品 控件 
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( 国 界面 整体 视觉 优化 

完成 原型 后 对 整体 进行 视觉 设计 ， 对 界面 的 文字 、 配 色 、 布 局 、 图 标 大 小 等 统一 规划 ， 
对 相对 位 置 、 间 距 等 进行 细节 调整 ， 以 及 查看 交互 细节 、 交 互 操作 是 否 符合 用 户 的 操作 
习惯 。 

@ 国 应 用 图 标 设计 

应 用 图 标 是 APP 的 入 口 ， 与 APP 界面 中 的 功能 图 标 不 同 。 将 应 用 图 标 设计 放 在 最 后 
是 为 了 避免 APP 界面 修改 导致 的 应 用 图 标的 修改 ， 也 能 使 应 用 图 标 和 APP 界面 统一 。 为 
了 不 同 界面 和 网 页 推广 的 使 用 ， 应 用 图 标 必须 保证 可 以 输出 为 多 种 尺寸 ， 并 且 在 小 尺寸 中 
也 能 清晰 辨别 图 标 中 的 信息 ， 如 图 1-3 所 示 。 

@ 国 其 他 页 面 设计 

设计 其 他 二 级 页 面 ， 添 加 图 标 等 控件 ©® 
到 界面 中 ， 完 成 整套 APP 设计 。 

A 切片 与 输出 
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113 APP 界面 配色 一 一 一 一 图 1-3 不 同 尺寸 的 应 用 图 标 
在 手机 APP 界面 设计 中 ， 色 彩 是 很 重要 的 一 个 UI| 设计 元 素 ， 合 理 地 搭配 色彩 能 够 制 
作出 震撼 的 视 完 效果 ， 设 计 出 吸引 人 的 焦点 。 


四 APP 中 的 三 色 构 成 
APP 色彩 搭配 方案 由 主 色 、 辅 助 色 和 点 睛 色 构 成 。 


© 主 色 ; 主 色 约 占 75%, 是 决定 画面 风格 趋向 的 色彩 。 主 色 并 不 一 定 只 有 一 个 颜色 ， 
它 可 以 是 一 种 色调 ， 一 般 为 同色 系 或 邻近 色 的 1~3 种 色调 ， 如 图 1-4 所 示 。 
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图 1-4 主 色 
人 四 捕 助 色 : 辅助 色 约 占 20%， 用 于 辅助 主 色 ， 使 画面 更 完美 、 更 丰富 、 更 显 优势 ， 
如 图 1-5 中 和 白色、 灰色 为 辅助 色 。 








去 睛 色 : 点 睛 色 约 占 5%, 起 到 引导 阅读 、 鞘 饰 画面 、 营 造 独 特 画 面 风 格 的 作用 ， 
如 图 1-6 中 左 图 中 的 蓝 色 、 黄 色 和 绿色 为 点 睛 色 ， 右 图 中 的 红色 为 点 睛 色 。 
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四 APP 色彩 运用 原理 
手机 APP 界面 要 给 人 简洁 整齐 、 条 理 清晰 之 感 , 依靠 的 是 界面 元 素 的 排版 和 间距 设计 ， 
以 及 色彩 的 合理 、 舒 适度 搭配 ， 如 图 1-7 所 示 。 
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图 1-7 色彩 的 搭配 
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其 色彩 运用 原理 如 下 。 


@ 和 后 调 的 统一 : 针对 软件 类 型 以 及 用 户 工作 环境 选择 恰当 的 色调 ， 如 绿色 体现 
环保 、 紫 色 代 表 浪 漫 、 蓝 色 表 现时 尚 等 。 淡 色 系 让 人 舒适 ， 而 背景 为 暗色 可 
以 不 让 人 觉得 疲劳 。 

( 各 言 名 弹 用 户 : 在 进行 设计 的 时 候 不 要 忽视 了 色盲 、 色 弱 群 体 ， 如 果 使 用 


了 特殊 顾 色 表示 重点 或 者 特别 的 东西 ， 应 该 使 用 特殊 指示 符 、 着 重 号 或 图 
标 等 。 
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名 疡 色 方案 的 测试 对 颜色 方案 的 测试 是 必需 的 ， 因 为 显示 器 、 显 卡 的 问题 ， 
色彩 的 表现 在 每 台 机 器 上 都 不 一 样 ， 所 以 应 该 经 过 严格 测试 ， 通 过 
进行 颜色 测试 。 
@ 遵循 对 比 原则 : 对 比 原 则 很 简单 ， a 深 
用 浅 色 文字。 例如 a ce I 
分 辨 ， 原因 是 红色 和 蓝 色 
特殊 场合 ， ee 
色彩 类 别 的 控制 : 整个 界面 的 色彩 尽量 少 用 类 别 不 同 的 颜色 ， 以 免 让 人 有 眼花 
绑 乱 ， 整 个 界面 出 现 混 杂 之 感 。 


CI APP 界面 设计 原则 


为 了 使 用 户 获得 更 好 的 视觉 体验 和 操作 体验 ， 我 们 在 设计 APP 界面 的 过 程 中 需要 遵 
循 一 定 的 原则 。 

全 视觉 一 臻 性 

视觉 一 致 性 是 APP 界面 设计 最 重要 的 原则 。 在 设计 界面 元 素 时 ， 只 有 把 握 了 外 形 、 
颜色 、 质 感 的 统一 才能 使 整个 界面 形成 统一 的 风格 ， 如 图 1-8 所 示 。 








图 1-8 视觉 一 致 性 


园 简易 性 

简易 性 是 指 界 面 的 简洁 、 直 观 、 易 用 。 软 件 是 为 了 方便 普通 用 户 而 设计 开发 的 ， 所 以 
在 设计 的 时 候 要 充分 考虑 软件 的 简单 性 、 简 易 操 作 性 和 实用 性 ， 这 样 才 会 吸引 更 多 的 用 户 
人 使用。 界面 上 华而不实 的 修饰 、 元 素 等 会 削弱 软件 本 身 的 功能 ， 也 不 便于 用 户 使 用 。iOS 
系统 中 的 界面 设计 严格 遵循 了 简约 、 直观 的 设计 原则 ， 如 图 1-9 所 示 。 
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relailo 
图 1-9 简约 、 直 观 的 界面 设计 
国 用 户 导向 
在 设计 手机 软件 界面 时 ， 设 计 师 要 清楚 软件 的 使 用 者 是 谁 ， 要 站 在 用 户 的 立场 和 观 
点 来 设计 软件 。 


手机 APP 软件 已 成 为 如 今 企业 宣传 产品 和 文化 理念 的 手段 ， 因 此 作为 一 种 交互 方 
式 需要 设计 师 做 好 软件 的 UI 界面 设计 去 吸引 大 量 用 户 使 用 。 

@ 蜀 遵循 用 户 习 惯 

根据 用 户 的 使 用 习惯 、 操 作 习 惯 来 设计 。 人 例如， 我们 对 某 个 操作 进行 确认 时 按钮 上 
会 显示 出 “确定 ”或 “确认 ”的 文字 ， 以 提示 用 户 进行 操作 。 按 钮 上 的 文字 和 菜单 上 的 
言 息 都 要 注意 这 个 标准 ， 当 不 知道 如 何 设计 时 可 以 借鉴 其 他 优秀 程序 的 语言 。 

应 用 程序 中 的 控件 可 以 实现 开启 /关闭 等 功能 ，i ee te 
作 体 验 ， 操 作 起 来 是 否 顺手 、 方 便 ， 这 是 检测 UI 设计 是 否 遵循 用 户 操作 习惯 的 标准 。 
用 户 使 用 手机 的 习惯 有 以 下 三 种 。 


@ 单 手持 握 操作 :49% 户 习 惯 单 手持 手 机 ， 这 也 是 主流 的 持 机 方式 ， 如 图 
1 一 10 所 示 。 同 时 ， 调 查 还 发 现 有 67% 的 用 户 习 惯用 右手 拇指 操作 ，33% 的 用 
本 尽管 屏幕 尺寸 在 不 断 变 化 ， 人 们 依然 习惯 于 担 

指 操作 。 
@@ 一 只 手持 握 另 一 只 手 操作 :这 种 操作 方式 占 36%, 不 同 于 单 手 操作 和 双手 操作 ， 


用 户 一 只 手 拿 着 手机 ， 另 一 只 手 操作 ， 其 中 用 大 拇指 来 操控 的 有 72%， 用 其 
他 手指 的 有 28%。 通 常 有 79% 的 人 使 用 左手 拿手 机 ， 而 21% 的 人 使 用 右手 拿 
手机 。 图 1-11 所 示 为 一 只 手持 担 、 另 一 只 手 操作 的 示意 图 。 








图 1-10 单 手 持 握 操作 图 1-11 一 只 手持 握 、 另 一 只 手 操作 
名 双手 操作 :双手 操作 占 15%， 在 双手 操作 的 用 户 中 有 90% 的 使 用 者 在 双手 操作 
时 是 竖 着 拿手 机 ， 只 有 10% 
的 使 用 者 是 横着 拿手 机 。 另 
外 ， 即 使 是 双手 操作 ， 使 用 
者 也 只 用 一 根 手 指 操作 ， 可 
能 是 右手 或 左手 的 大 拇指 或 
者 是 其 他 手指 。 图 1-12 所 
示 为 双手 操作 示意 图 。 图 1-12 双手 操作 





掌握 了 用 户 使 用 手机 的 操作 习惯 后 ， 在 设计 时 将 重要 的 操作 放 在 界面 的 两 侧 ， 便 于 用 
户 进 行 单 手 操作 ， 将 次 要 操作 放 在 界面 的 顶端 ， 这 样 的 设计 更 符合 用 户 的 习惯 。 

国 操作 人 性 化 

用 户 根 据 自己 的 习惯 设置 界面 就 是 操作 人 性 化 的 表现 ， 目 前 很 多 APP 都 支持 用 户 设 
置 界面 的 皮肤 、 风 格 等 ， 这 些 人 性 化 的 功能 让 用 户 体验 到 程序 的 多 样 性 和 丰富 度 。 

色彩 搭配 原则 

不 同 的 颜色 对 人 的 感觉 有 不 同 的 影响 ， 例 如 黄色 可 以 让 人 联想 到 阳光 ， 是 一 种 温暖 的 
颜色 ; 黑色 则 显得 比较 庄重 ， 所 以 在 设计 软件 时 要 根据 软件 主题 和 功能 进行 色彩 的 搭配 。 

《网 视觉 平衡 原则 

平衡 的 视觉 能 让 用 户 舒 服 地 使 用 软件 ， 所 以 设计 师 不 可 忽视 这 一 重要 原则 。 通 常 ， 要 

达到 视 完 平衡 需 按 照 用 户 的 阅读 习惯 来 设计 ， 让 界面 整齐 ， 使 用 户 可 以 流畅 地 阅读 内 容 。 

站 布局 控制 原则 

有 很 多 设计 师 不 是 很 重视 界面 的 排版 布局 ， 所 以 将 界面 设计 得 过 于 死板 ; 或 者 直接 模 


仿 别 人 的 软件 排版 ， 把 大量 信息 堆 集 在 页 面 上 ， 导 致 布局 凌乱 ， 造 成 使 用 者 阅读 困难 的 癌 
题 ， 这 芋 都 是 不 可 取 的 。 


(CHB APP ul 设计 师 必 须 学 握 的 基本 技能 


随 着 智能 手机 和 各 种 移动 终端 设备 的 普及 ，APP 作为 第 三 方 智 能 手机 应 用 程序 已 逐渐 
把 我 们 帝 入 一 个 习惯 使 用 APP 客户 站 上 网 的 时 期 ，APP UI 设计 师 也 成 了 最 热门 的 职业 ， 
要 想 成 为 APP UI| 设计 师 必 须 掌 握 以 下 基本 技能 。 


(网 熟练 操作 绘图 软件 

对 绘图 软件 的 熟练 操作 是 制作 一 款 优 秀 APP 的 前 提 ， 这 类 软件 有 很 多 ， 其 中 最 常用 
的 是 Photoshop 和 lllustrator， 本 书 选择 的 是 Photoshop CC。 

国 了 解 移动 端的 界面 模式 

三 六 移动 平台 之 间 有 着 相似 之 处 ， 但 是 深入 探究 它们 的 交互 设计 会 发 现在 理念 上 彼此 
之 加 存在 着 巨大 委 异 。 作 为 一 个 设计 师 ， 需 要 明 昌 这 些 差 寞 所 在 ， 以 及 它们 是 如 何 体现 在 
实际 案例 中 的 。 

& 审美 能 

对 界面 的 视 党 设计 、 色 彩 的 观察 和 分 析 、 文 字 的 选择 、 整 体 界面 的 统一 等 都 是 设计 师 
必须 要 有 的 基本 审美 。 

对 理解 能 力 和 手绘 能 力 

设计 师 应 该 具备 理解 能 力 和 手绘 能 力 ， 能 快速 地 看 懂 产 品 需求 文档 ， 以 及 在 设计 前 期 
的 手绘 草图 能 力 。 


每 


APP UI 元 素质 感 ) 





而 出 ， 必 须 具 有 一 定 的 特色 。 这 个 特色 际 了 软件 本 身 的 功能 之 外 ， 
还 有 很 重要 的 一 点 就 是 UI 设计 要 足够 突出 和 吸引 人 ， 要 给 用 户 一 
定 的 视 客 冲击 效果 。 界 面 元 素 是 组 成 完整 界面 的 个 体 ， 元 素 的 突 
出 设计 是 整个 设计 的 关键 。 


COE 质感 的 体现 


元 素 的 质感 包括 元 素 的 材质 体现 、 立 体感 体现 、 光 影 体 现 等 ， 这 些 细节 能 让 元 素 脱 矣 
而 出 。 

《网 透视 关系 

透视 法 则 是 造型 的 重要 依据 ， 也 是 指导 我 们 在 造型 中 正确 地 观察 、 理 解 和 表现 形体 、 
物象 的 科学 的 理性 法 则 之 一 。 

GD 透视 原理 

人 的 眼睛 观看 物象 是 通过 瞳孔 反映 于 眼睛 的 视网膜 上 而 被 感知 的 。 远 近 距 离 不 同 的 相 
同 物 象 ， 距 离 越 近 的 在 视网膜 上 的 成 像 越 大 ， 距 离 越 远 的 则 成 像 越 小 ， 这 个 近 大 远 小 的 视 
觉 现象 被 称 为 透视 现象 。 

透视 变化 的 基本 类 型 

透视 的 基本 类 型 包括 平行 透视 、 成 角 和 透视、 倾斜 透视 、 圆 面 的 透视 、 圆 柱 体 的 透视 、 
圆 球体 的 透视 等 。 透 视 在 图 标 上 的 应 用 较 多 ， 如 图 1-13 所 示 。 


| 在 目前 数不胜数 的 APP 软件 中 ， 一 款 新 的 APP 软件 要 想 脱 突 
Sa 
人 CS 











图 1-13 图 标 中 的 透视 
在 APP 界面 透视 展示 效果 上 大 部 分 采用 的 是 倾斜 透视 ， 如 图 1-14 所 示 。 





图 1-14 倾斜 透视 


在 任何 设计 中 光影 天 系 都 尤为 重要 ， 其 主要 通过 光照 的 角度 和 物体 本 身 的 阴影 来 具体 


ee 
必 备 基础 ， 光 影 光 线 的 处 理 得 当 能 让 我 


们 的 设计 更 加 目 然 、 生 动 、 直 观 、 精 致 
图 1-15 所 示 为 对 一 个 平面 添加 了 高 光 、 


阴影 、 投 影 ， 平 面 立刻 变 得 立体 ， 从 空 
旧 中 脱 钉 而 出 。 

物体 在 光线 的 照射 下 产生 立体 感 ， 
对 出 现 物 体 明暗 调子 的 规律 可 归纳 为 “三 
面 五 调 ”。 





图 1-15 光影 使 平面 立体 化 


(物体 在 受 光 的 照射 后 呈现 出 不 同 的 明 瞳 ， 受 光 的 一 面 叫 亮 面 ， 侧 受 光 的 一 面 叫 

灰 面 ， 背 光 的 一 面 叫 暗 面 。 
© pape se 度 的 黑白 层次 ， 是 面 所 反映 光 的 数量 ， 也 就 是 面 的 深浅 程 
度 。 在 三 大 面 中 , 根据 受 光 的 强 弱 不 同 还 有 很 多 明显 的 区 别 ， 形成 了 5 种 调子 。 


oe 灰 面 的 灰 调 和 了 瞳 面 的 瞳 调 之 外 ， 瞳 面 由 于 环境 的 影响 又 出 现 
了 “反光 ”。 另 外 ， 在 灰 面 与 暗 面 交 界 的 地 方 既 不 受 光 源 的 照射 ， 也 不 受 反光 
的 影响 ， 因 此 挤 出 了 一 条 最 上 暗 的 面 ， 叫 “明暗 交界 ”， 这 就 是 我 们 常 说 的 “五 
大 调子 ”。 





在 Ul 设计 中 不 用 把 所 有 的 调子 都 绘制 出 来 ， 一 般 而 言 ， 表 现 物体 的 厚度 有 两 个 部 分 


必 不 可 少 ， 分 别 是 受 光 部 分 和 阴影 部 分 。 





我 们 需要 清楚 光源 从 哪里 
来 ， 高 光 的 位 置 决定 了 阴影 的 
{wi GT 
@ 
提示 影响 光 的 因素 


主要 是 结构 ， 其 次 是 
材质 对 光 的 反射 比例 。 


READIMORE 





图 1-16 光与影 


用 Photoshop 图 层 样式 实现 UI 质感 


在 APP UI 设计 中 ， 为 了 让 界面 中 的 元 素 立 体 化 以 及 添加 光影 等 视觉 效果 ， 经 常会 用 
到 Photoshop 中 的 图 层 样式 。 单 击 “ 图 层 ” 面 板 底部 的 “添加 图 层 样 式 ” 按 钮 ， 在 展开 
的 菜单 中 有 10 种 不 同 的 图 层 样式 ,如 图 1-17 所 示 。 双 击 图 层 可 打开 “图 层 样式 ”对 话 框 ， 
wl ea ea 











样式 ] 1 广 一 混合 选项 



























































常规 混合 | 
[ 取消 | 

i 混合 模式 (D): | 
一 一 不 透明 度 (0): 一 一 一 一 下 新 建 样式 (W)… 设 

[Eb 而 星 ] 
纹理 - 高 级 混合 | st 计 
指 边 填充 不 透明 度 (): 一 zy 100  % 图 基 
内 阴影 通道 可 6(6) 园 B@g) 础 





内 发 光 挖 空 N: 
光泽 将 内 部 效果 混合 成 组 人 D 
颜色 到 加 将 章 由 图 层 混合 成 组 (P) 
可 渐变 亚 加 

口 图 案 琶 加 矢量 蒙 版 隐藏 效果 (H) 


-一 一 混合 商 @ 带 日: 灰色 一 一 一 一 一 一 一 | 










































































图 1-17 图 层 样式 图 1-18 “图 层 样 式 ” 对 话 框 

下 面 介绍 图 层 样 式 中 几 个 比较 常用 的 样式 。 

四 混合 选项 

混合 选项 对 应 我 们 打开 “图 层 样式 ”对 话 框 后 看 到 的 第 一 个 设置 面板 , 包括 常规 混合 、 
高 级 混合 、 混 合 颜色 带 三 个 大 的 功能 区 ， 这 些 功 能 区 会 影响 样式 的 总 体 效 果 ， 因 此 学 会 其 
设置 是 非常 必要 的 。 

和 匀 面 和 浮雕 

打开 一 个 按 乌 ， 为 按钮 洪 加 “ 科 面 和 浮 肘 ” 样 式 ， 如 图 1-19 所 示 。 添 加 样式 后 的 效 
果 如 图 1-20 所 示 。 





Photoshop 创意 全 pb 所 去 设 计 从 入 门 到 精通 









和 斜面 和 浮雕 
结构 


样式 (1D): 内 斜面 











深度 D): ZS % 
NN:@L OF 

大 小 2): 十 8 像素 

软化 人 -em Ps | 3 像素 


。 | 加 使 用 全 局 光 (G) 
和 | 30 度 


光泽 等 高 线 : | 站 消除 锯齿 () 


MIN MAX 高 光 模式 (H): 小 色 二 MIN MAX 
不 透明 度 (0): 一 2 一 75  % 





阴影 模式 (A): 正片 亚 底 - OM 
不 透明 度 (C): 27 % 








Gi [ER 
1-19 添加 “斜面 和 浮雕 ”样式 1-20 添加 样式 后 的 效果 
“斜面 和 浮雕 ”样式 包括 内 斜面、 外 适 面 、 浮 对 效果 、 枕 状 浮 MT 
如 图 1-21 所 示 。 虽然 每 一 项 中 包含 的 设置 选项 都 是 一 样 的 , 但 是 制作 出 来 的 效果 却 大 相 径 庭 。 
“ 冬 面 和 浮 有 雕 ” 样 陈设 置 参数 包括 “结构 ”和 “阴影 ”两 部 分 ， 通 过 这 些 设置 我 们 可 
以 控制 浮 导 的 类 型 、 立 体面 的 幅度 、 高 光 及 暗部 的 颜色 等 ,做 出 立体 感 和 质感 较 强 的 图 形 。 
在 “图 层 样式 ”对 话 框 左 侧 的 样式 选项 中 ，“ 和 锋面 和 浮雕 ”下 方 包含 了 “等 高 线 ” 和 
“纹理 ”两 个 选项 ， 如 图 1-22 所 示 。 











~ 人 — 
































































等 高 
图 素 
等 高 线 : [A 局 消 锯 占 员 
范围 (R): 2Z5 50 % 
样式 人 T): 内 科 面 加 
方法 (Q): 外 香 面 
深度 伯 ): 浮雕 效果 
方向 :| 榨 杖 六 克 
摘 边 :邓肯 
大 小 (2): 1 
图 1-21 5 个 样式 图 1-22 “等 高 线 ”和 “纹理 * 


人 @ 年 高 作用 于 控制 浮雕 的 外 形 及 应 用 范围 。 


(@@ 纹理 : 将 纹理 图 案 过 加 到 对 象 上 ， 实 现 材质 效果 。 





的 内 阴影 
1-23 所 示 为 对 象 深 加 “内 阴影 ”样式 后 在 罕 徘 图 层 内 容 的 边缘 深 加 阴影 ， 使 图 层 
具有 凹陷 的 效果 。 在 设计 APP UI 元 素 时 ， 为 了 体现 凹陷 的 质感 通常 会 用 到 “内 阴影 ”图 
层 样 式 。 


2:45 





2:45 


图 1-23 添加 “内 阴影 ”样式 的 前 后 对 比 





@ 国 投影 
图 1-24 所 示 为 对 象 添加 “投影 ”图 层 样式 后 在 对 象 的 下 方 出 现 了 一 个 和 图 像 内 容 相 
同 的 “影子 ”， 在 “投影 ”样式 中 可 以 设置 影子 的 方向 、 距 离 、 大 小 等 ， 如 图 1-24 所 示 。 





投影 














结构 
混合 模式 (6): 正片 又 底 ~ 国 国 
不 透明 度 (0O): % 
角度 :人 上) 50 ” 度 问 使 有 全 局 光 (G) 
© be © 
距离 (D): 18 像素 
扩展 RQ: A 二 一 0。 % 
大 小 (5): 25 10 ”像素 
品质 
等 高 线 ; 4 | 口 消 聊 锯 占 (D 
杂 色 (N): 4 % 


团 图 层 挖 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 














图 1-24 添加 “投影 ”样式 的 前 后 对 比 


| © 
@ 内 发 光 Or 是 示 。 在 Photoshop 中 每 个 图 层 


ut " UN A 样式 的 “角度 ” 旁 都 有 一 个 “使 
1-25 所 示 为 对 象 添加 “内 发 光 ” 图 层 样 式 后 大 本 


在 内 侧 边 绿 形成 了 一 种 发 光 效 果 。 保证 创造 的 光影 部 在 一 个 位 置 


READMORE 























内 发 光 
半 构 
二 -== 设 
混合 模式 (6); 正片 县 底 ” - 
不 透明 度 (O): 万 国 |% 计 
杂 色 (: < 0 % 基 
6 
图 础 
图 素 
方法 (0): 柔和 ~ 
源 :加 居中 人 E) ”加 边缘 (G) 
阻塞 (C): G 0 % 
大 小 (5): = 20 像素 
品质 
等 高 线 : | 和 回 消除 刀具 (0) 
范围 (R): % 
拉动 7: < 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 

















图 1-25 添加 “内 发 光 ” 样式 的 前 后 对 比 





| 外 点 光 
人 外 发 光 0 
混合 模式 {E): 县 加 MM 





团 % 


图 1-26 所 示 为 对 象 添加 “外 发 光 ” 图 层 样 式 后 在 of lh 
边缘 外 侧 形 成 发 光 的 效果 。 @[ ] Ol rs| 




















图 素 
mg 方法 (Q): 条 和 
CEA 
This Is What Makes Us Girls ee - 
-= | 
1:35 | 3:43 
品质 
等 高 绪 : |。 - 民 ] 消除 锯齿 人 L) 
范围 (R): ZS % 
Lana Del Rey 抖动 中): < 0 % 
This Is What Makes Us Girls 
1:35 | 3:43 | 设置 为 默认 值 | | 复位 为 默认 值 | 








图 1-26 添加 “外 发 光 ” 样式 的 前 后 对 比 





更 装 @U| Photoshop 创意 傅 p 志 未 设计 从 入 门 到 精通 





“外 发 光 ” 图 层 样式 的 设置 参数 包 合 了 三 组 。 


为 : 用 于 设置 外 发 光 的 颜色 和 光照 强度 等 属性 。 
: 用 于 设置 光芒 的 大 小 。 


: 用 于 设置 外 发 光 效 果 的 细 闻 。 





《 熏 渐变 又 加 

图 1-27 所 示 为 对 象 应 用 “渐变 车 加 ”图 层 样 式 后 实现 了 金属 质感 效果 。“ 渐 变 车 加 ” 
图 层 样 陈 一 般 用 于 为 对 象 进行 渐变 色 的 覆盖 ， 通 过 
家 | 顷 色 的 混合 放 











渐变 又 加 

渐变 

混合 模式 (0): 正常 ~ 回访 色 

不 透明 度 (P): 0 
渐变 ; 反 向 (R) 
样式 (L): 角度 ~ 园 与 图 层 对 齐 目 
角度 (N): | * ) 90 度 
编 放 (5S): - : 100  % 
| 设置 为 默认 值 | | 复位 为 默认 值 




















图 1-27 添加 “渐变 又 加 ”样式 的 前 后 对 比 


用 Photoshop 绘制 基础 元 素 图 形 


1.3 在 制作 移动 UI 界面 时 必须 选择 一 款 合 适 的 绘图 软件 ， 本 书 选 择 
的 是 Photoshop CC。 在 Photoshop 中 矩形、 椭圆 、 圆 角 和 矩形 等 工 
具 是 最 基本 的 绘图 工具 ， 也 是 绘制 APP 元 素 的 常用 工具 。 





kk 
Ww/ 


ED We 


在 绘制 APP 界面 的 过 程 中 经 单 会 使 用 “椭圆 工具 ”绘制 椭圆 元 素 ， 包 括 椭圆 的 图 形 、 
按 钳 、 医 图 标 等 ， 如 图 1—28 所 示 。 


ll 中国 联通 倒台 13:30 


ill. O02-UK 全 





fn Spaghetti Scale 








Collect all your likes, plant them 
around town, find new things. 
©::: 


1-28 椭圆 元 素 











对 于 APP UI 设计 ， 


使 用 “椭圆 工具 ”绘制 椭圆 元 素 。 


() 司 动 Photoshop， 新 建文 档 ， 


在 工具 箱 中 选择 “椭圆 工具 ”， 


如 图 1 一 29 所 示 。 


EF 
3 国 矩形 工 且 


国 图 角 拒 形 工 


图 1-29 选择 “椭圆 工具 ” 


O03 在 弹出 的 对 话 框 中 选择 一 种 
颜色 ， 如 图 1-31 所 示 。 








% 
% 
% 
% 








只 有 Web 颜色 





图 1-31 选择 颜色 


(})S 在 画布 上 单 击 并 拖 动 绘制 
圆 ， 然 后 用 同样 的 方法 修改 
硕 色 并 绘制 一 个 小 圆 , 如 图 1-33 所 示 。 





图 1-33 绘制 圆 





“椭圆 工具 ”是 Photoshop 中 最 常用 的 工具 之 一 ， 下 面 介绍 如 何 


02 Ee sl) 
颜色 , 在 打开 的 面板 中 单 击 “ 拾 


色 硕 ”图 标 ， 如 图 1-30 所 示 。 








PS 文件 (F) 编辑 (日 ”图 像 四 ”图 层 (L) 类 型 (Y) 选择 ( 
~ :|| 填充 : | 国 阳 描 边 :| :一 | |3 点 











最 近 使 用 的 颜色 
am BM 


RNPASGNKCDO 


图 1-30 单 击 “ 拾 色 器 ”图 标 
0 单 击 “ 确 定 ” 按 钮 ， 进 入 选项 栏 
中 设置 宽 、 高 参数 均 为 180 px， 
如 图 1-32 所 示 。 























”二 | 口 x 挤 辽 如 | 口 弥 路 径 近 动 

















() 在 工具 箱 中 按 住 “ 椭 圆 工 
具 ”， 在 打开 的 工具 组 中 选 
择 “ 目 定形 状 工 具 ”， 如 图 1-34 所 示 。 


国 拒 形 工具 

国 图 角 拒 形 工 县 
。 /SS 本 图 工具 

全 芭 蕊 开工 县 

三 性 

虑 8 目 定 形状 工具 





图 1-34 选择 “ 自 定形 状 工具 ” 








更 哆 2U Photoshop 创意 伟 p 所 去 设 计 从 入 门 到 精通 





(7 三 多 项 三 踢 晤 击 吉 图 中 255 区 () 展开 列表 ， 单 击 如 图 1-36 所 
示 的 图 标 。 
二 | 闲人 有 日 区 对 it 


示 的 三 角 按钮 。 






































一 让 ul |/ 

1 汪 光 国共 
一 “二 志 时 者 
O99 涝 
| 类 多 (CO 
(Tv 


































































































图 1-35 单 击 按钮 图 1-36 单 击 图 标 





() 在 展开 的 子 亲 单 中 选择 “全 部 ” 
选项 ， 如 图 1-37 所 示 。 

] 在 弹出 的 对 话 框 中 单 击 “确定 ” 
按钮 ， 如 图 1-38 所 示 。 


是 否 用 形状 中 的 形状 薪 换 当前 的 形状 ? 


| 





图 1-37 选择 “全 部 ”选项 图 1-38 单 击 “确定 ”按钮 
] 在 载 入 的 形状 中 选择 “标志 ] 在 画面 中 按 住 Shift 键 进 行 
3”， 如 图 1-39 所 示 。 绘制 ， 如 图 1-40 所 示 。 








人 [1s6 伪 | @o H: [155 像 | 日 尼 坊 | 次. 了 :| 全 目 忆 jia 
一 VS 有一 一 > 





2 梢 一 一 一 一 Ce 人 es \\、 
ema 国生 人 [一 0 00 OD 
ODD= SOODxO, ND 


i 人 MN 详 米 6 人 来 半 入 人 (加 
中 由 蒜 训 尖 记 寺 吉 米 启 米 WVWwy17 
全 一 一 了 0 员 芝 叶 训 入 ” 富 罗 下 说 w 履 
岂 业 生 亚 可 入 一 | 首 ”“ 沁 下 一 图 因 

2 图 心 攻 开阔 式 党 区 了 旨 5 一 汪 闪 食 





于 南 加 @@ 四 本色 苞 
布 一 四 订 合 

















图 1-39 选择 “标志 3” 图 1-40 绘制 形状 





] 3 按 Ctrl+T 组 合 键 ， 然 后 按 住 Shift ] 按 Enter 键 确认 ， 完 成 效果 如 图 
键 旋转 -90 上 度 ， 如 图 1-41 所 示 。 W217 未、 





图 1-41 旋转 图 1-42 完成 效果 


(“左下 运 形 、 国 角 和 还 形 


@ 和 矩 形 
使 用 “和 矩形 工具 ”可 以 绘制 出 正方 形 、 和 矩形 等 图 形 效果 ， 一 般 APP 整个 界面 外 框 就 
是 窍 形 ， 而 界面 中 用 于 分 隅 的 对 象 也 贡 用 赴 形 ， 如 图 1-43 所 示 。 
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e My Selection 旭 
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图 1-43 和 矩形 元 素 


0 在 工具 箱 中 选择 “ 撼 形 工 (2 在 画布 中 单 击 并 拖 动 鼠标 即 
具 ”， 如 图 1-44 所 示 。 可 绘制 一 个 矩形 ， 如 图 1-45 




































































-1 — No 
"RN | 人 
| 国 加 多 3EPI 具 U 
一 二 类 图 工具 U 
A 二 符 岂 形 I 了 县 U | 
旧 妇 | ”直线 工具 U | 
男 | 套 目 定 形 六 工具 U 


1-44 选择 “和 扼 形 工具 “ 图 1-45 绘制 矩形 














() 双击 图 技 下 三 打开 且 D 和 后 框 中 志和 拌和 届 舟 中 民 时 民间 测 赴 兮 娄 ， 划 图 46 
所 示 。 








04 Da fe | EH 






































































































































Ba | C 碎 在 2 a2 | 
pe | := 定形 工具 ”， 设 置 填充 凑 色 
| 混合 模式 6): 正片 亚 底 -7 es i 加 
| ; : 公 > 一 
TO 一 下 ee ob se sl A 
纹理 角度 (A): ( |) 50 度 回 使 用 全 局 光 (G) 3 
口 指 边 4 
Ee 距离 0): 5 一 一 5 ”像素 国 
一 六 和 扩展 R): Ce 0 % 
站 大 小 5): 一 8 像素 
号 疡 色 和 加 品质 
口 新 要 加 $s: | | Tin 
| 一 一 隶 色 :IC 0 % 
可 图 层 挖 空投 影 (J) 
| 




















图 1-46 设置 “投影 " 图 1-47 绘制 矩形 
0 设置 填充 颜色 为 灰色 ， 使 用 “和 矩形 工具 ”在 下 方 绘制 矩形 条 ， 如 图 1-48 
所 示 。 








设置 填充 颜色 为 白色 ， 使 用 “和 窍 形 工具 ”在 上 方 绘制 矩形 条 ， 并 设置 不 透明 度 
UO 为 20%， 如 图 1-49 所 示 。 





图 1-48 绘制 矩形 条 1-49 绘制 矩形 并 设置 不 透明 度 
()/ 使 用 “椭圆 工具 ”绘制 椭圆 ， ()% 使 用 “椭圆 工具 ”绘制 一 个 填 
颜色 为 #80000， 如 图 1-50 充 颜色 为 白色 的 椭圆 ， 然 后 复 
所 示 。 制 一 个 到 右 侧 , 并 在 中 间 使 用 “矩形 工具 ” 
绘制 一 个 和 矩形 条 ， 如 图 1-51 所 示 。 








图 1-50 绘制 椭圆 图 1-51 绘制 矩形 条 











(09 使 用 “和 玫 形 工具 ”绘制 一 个 填 区 其 色 为 炙 色 的 窍 形 ， 然 后 按 住 Alt 键 单 击 两 个 
图 层 之 间 创 建 勇 贴 索 版 ， 如 图 1-52 所 示 。 
| () 使 用 “ 横 排 文字 下 具 ” 输 入 文学， 完成 综 制 ,如 图 1553 所 示 。 


FEE 加 © 荆 口 音 
7 i 
© 搬 贺 2 拷 由 - 
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® | 形状 1 a 























图 1-52 创建 剪贴 蒙 版 图 1-53 完成 绘制 
加 园 角 算 形 


使 用 “ 圆 角 和 矩形 工具 ”可 以 绘制 圆 角 矩形， 在 APP 元 素 中 最 前 见 的 圆 角 和 窍 形 图 形 残 
是 图 标 ， 如 图 1-54 所 示 。 除 此 之 外 ， 界 面 边界 也 多 用 圆 角 和 窃 形 ， 如 图 1-55 所 示 。 





图 1-54 图 标 
下 面 介绍 使 用 “ 圆 角 和 矩形 工具 ”绘制 简 
易 图 标的 方法 ， 并 通过 设置 圆 角 半 径 来 改变 圆 Santa Monica 


角 大 小 。 

() | 在 工具 箱 中 按 住 “十 形 工具 ”， 在 
展开 的 按钮 组 中 选择 “ 圆 角 矩形 工 

贞 几 且 直 2 国富 写 | 忆 站 区 

0 几 在 选项 栏 中 单 击 “填充 ”后 的 闫 色 ， 
在 展开 的 面板 中 吸取 颜色 ， 如 图 

1-57 所 示 。 


Tomorrow 
Afternoon 





图 1-55 界面 边界 





更 筠 gU| Photoshop 创意 依 p 所 未 设计 从 入 门 到 精通 








PS 文件 (F) 编辑 (日 ”图 像 四 ”图 层 (L) 类 型 (Y) ; 














= 国 拒 形 工具 
国 图 角 拒 形 工具 
时 杭 图 工具 U 
寺 和 全 WI 且 UU 


.” 直 续 工 且 U 
压 ? 上 自 定 形状 工具 UU 








NAPASGNKODO 


图 1-56 选择 “ 圆 角 和 矩形 工具 ” 图 1-57 吸取 颜色 


0 3 在 画布 中 单 击 并 回 口 区 4 形状 属性 

拖 动 腿 标 绘制 图 Pl LP 
X: |99 像素 让 |387 像素 
形 ， 然 后 在 “属性 ”面板 中 。 高 吉 
久 和 二 机 人 员 = J J . 
改 寓 JJ II 为 Ls Px， 45 像 素 45 像 素 45 像 素 45 像 素 
角 半 径 为 45 px， 如 图 1-58 


所 示 。 


(4 修改 后 的 圆 角 和 矩形 
如 图 1-59 所 示 。 
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图 1-58 设置 宽 、 高 及 圆 角 半径 图 1-59 圆 角 和 矩 形 


























































































































Ea 
回 口 区 属性 Ei 人 
提示 : 单 击 “ 属 性 ”面板 中 的 “将 
Ba EI 角 半 径 值 链接 在 一 起 ”按钮 可 以 单独 
一下 二 设置 4 个 角 的 半径 ， 如 图 1-60 所 示 。 
es 导 在 使 用 圆 角 半径 绘制 前 也 可 以 直接 在 选 
栅栏 中 设置 宽 、 高 参数 和 所 有 的 国 角 站 和 
中 124 像 素 “||24 乔 素 | 回 三 

a a a 

READNMORE 





图 1-60 单独 设置 4 个 角 的 半径 


PSs 文件 (F) 编辑 (6 图 像 四 ”图 层 (L) 类 型 (Y) 选择 (S$) 污 简 (视图 (V) 窗口 (W) ”帮助 (H) 


”| 形 大 <] 坊 训 :| ,| 擅 : mg = EE 


psd7958.psd @ 100% (DIAL, RGB/8) * 












_ | 对 济 边 绢 





NI 


图 1-61 在 选项 栏 中 设置 


() pa 
置 填充 颜色 为 白色 ， 绘 

制 一 个 定形 条 ， 并 按 Alt 键 拖 动 

复制 两 个 ， 调 整 位 置 ， 如 图 1-62 

所 示 。 

06 选择 “椭圆 工具 ”， 绘 








制 一 个 正 圆 ， 并 调整 位 
置 ， 如 图 1-63 所 示 。 


图 1-62 绘制 矩形 条 并 复制 图 1-63 绘制 圆 








@@ 。 择 [ 洁 第 由 ”视图 lV 窗口 (W) 帮助 (H) 


提示 : 使 用 “移动 工具 ” 选 
择 三 个 算 形 条 ， 在 选项 栏 中 
单 击 “垂直 居中 分 布 ” 按 钮 可 以 将 其 
按 同等 间 孙 分布， 如 图 1 一 64 所 示 。 





En | 一 
时 


Rp 幸 喇 | 有 






图 1-64 垂直 居中 分 布 





由 -pp 
如 图 1-65 所 示 。 选择 两 个 国 ， 在 选项 栏 中 


单 击 垂直 居中 分 布 ”按钮 和 水 


08 选择 两 个 圆 ， 按 Alt 键 拖 动 复制 并 调整 位 置 ， | 各。 让。 了 和 和 二 对 让 
如 图 1-66 所 示 . 


tO Om 
SS m= )s 
Pe wm 


图 1-65 绘制 圆 图 1-66 复制 


OIEB Wei 


椭圆 矩形 不 是 常规 图 形 ， 它 是 由 圆 角 和 矩形 演变 而 来 的 ， 介 于 圆 和 圆 角 矩形 之 间 ， 是 综 
制 主题 图 标 最 流行 的 形状 之 一 ， 如 图 1-67 所 示 。 








Tuesday 





图 1-67 椭圆 矩形 图 标 
绘制 椭圆 矩形 的 方法 有 多 种 ， 可 以 使 用 “ 圆 角 矩 形 工具 ”绘制 后 调整 得 到 ， 也 可 以 使 
用 “多 边 形 工具 ”直接 绘制 。 








Photoshop 创意 全 pb 所 未 没 计 从 入 门 到 精通 





O01 打开 Photoshop， 执 行 “ 文 件 ”|“ 新 建 ” 命 令 ， 在 弹出 的 对 话 框 中 设置 宽度 和 
高 度 参 数 ， 如 图 1-68 所 示 。 
02 单 击 “确定 ”按钮 新 建文 档 ， 然 后 在 左 侧 的 工具 箱 中 选择 “多 边 形 工具 ”| @.， 
如 图 1-69 所 示 。 

















. 
名 称 (N): 未 标题 " 国 | 汇 形 工 且 
一 预 疫 (P): 自 证 - 国 图 前 矩形 工具 
KI) 目 
宽度 (W): 600 像素 ~ 腹 除 预 设 (D).. S 基本 工 / 
高 度 (H): 600 像素 ~ 重 SL 
分 类 率 (R): 72 像素 /英寸 Wa 直线 [上 且 
RGB 颜色 ~ 8 位 ~ 本 自 定 形 拱 工 且 
背景 内 容 (C): 白色 > 图 像 大 小 : 
人 | 高 级 1.03M 
颜色 配置 文件 (D): sRGB IEC61966-2.1 
像素 长 宽 比 (X): 方形 像素 ~ 
图 1-68 新 建文 档 图 1-69 选择 “多 边 形 工具 ” 


() 3 在 选项 栏 中 设置 边 为 4， 然后 单 击 左 侧 的 三 按钮 ， 如 图 1-70 所 示 。 


PS ”文件 (F) ” 租 毕 人 日 “图 像 四 ”图 层 (类 型 () 选择 (9 请 第 (TD 视图 (V) 窗口 (W) ”帮助 (H) 


















量 -| [Li“ | 需 :| 国 本 描 加 :| 一 | 点 | -| -一直 Y c H: 0 像素 | | 日 ， 尼 ， 塌 -| 对 让 过 缘 


Wu 禄 圆 滤 形 .psd @ 110% (Clock, RGB/8)* x 












图 1-70 单 击 按钮 

















() 展开 后 选中 “平滑 拐角 ” 复 选 在 画面 中 间 按 住 Shift 键 即 可 
框 ， 如 图 1-71 所 示 。 绘制 椭圆 窍 形 , 如 图 1-72 所 示 。 
上 时 
图 1-71 选中 “平滑 拐角 ” 复 选 框 图 1-72 绘制 椭圆 矩形 
QO 继续 绘制 椭圆 矩形 ， 上 略 比 底层 使 用 “椭圆 工具 ”和 “和 矩形 工具 ” 
的 图 形 小 ， 并 修改 颜色 为 白色 ， 绘制 指针 ， 如 图 1-74 所 示 。 


如 图 1-73 所 示 。 


图 1-73 绘制 图 形 图 1-74 绘制 指针 














08 E21 | 2 i TE 0 用 同样 的 方法 在 分 针 上 也 添加 
打开 的 “图 层 样式 ”对 话 框 投影 效果 ， 如 图 1-76 所 示 。 


中 选择 “投影 ”， 设 置 投影 参数 ， 如 图 
| 全 了 与 所 示 。 
投影 
结构 
混合 模式 伯 ): 正常 
不 透明 度 (0): sy 100  % 
角度 (A): | | 120 ” 度 回 使 用 全 局 光 (G) 


距离 (0): 人 
扩展 QR): G 
大 小 (5): @ 


等 高 续 : | - 消除 锯 齿 (L) 


杂 色 人 N): % 


避 图 层 控 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 


























图 1-75 设置 投影 参数 图 1-76 投影 效果 
] 选择 最 下 层 的 椭圆 矩形 ， 为 该 | 单 击 “ 确 定 ” 按 钮 完成 最 终 效 
图 层 添加 “投影 ”样式 ， 参 数 末 ， 如 图 1-78 所 不。 
如 图 1-77 所 示 。 


投影 
结构 


混合 模式 (6): 正常 ~ El 
不 透明 度 (D): 10  % 
前 度 (A): | * | 度 加 | 使 用 全 局 光 (G) 


距离 {D0): 于 
扩展 R): 人 
大 小 (5): 本 


品质 
等 高 线 : | - 消除 锯齿 (L) 
杂 色 人 N): (5 0 % 


可 图 层 挖 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 











图 1-77 添加 投影 图 1-78 完成 效果 


CIES) 组 合 图 形 


我 们 知 追 ， 在 APP TT rm a ut 算 形 等 基本 形 ; | Mm 
看 似 很 复杂 ， 但 都 是 使 用 各 种 不 同 的 形 ; 适当 组 合 得 到 的 。 一 般 来 说 ， 我 们 前 面 介 
的 矩形 、 oop th eat ohn 2 














图 1-79 基本 图 形 





Photoshop 创意 合 p 希 素 设计 从 入 门 到 精通 





这 种 组 合 方式 大 家 平常 可 能 用 的 少 ， 但 在 需要 用 图 标 来 表现 一 个 物体 时 可 以 通过 观察 
将 该 物体 尽 可 能 地 拆 分 为 最 简单 的 形状 。 例 如 , 水 滴 图 标 可 以 用 一 个 三 角形 和 一 个 圆 组 成 ， 
wel SO Es I A A a A A els 


A:@- 人 .©@ 


1-80 组 成 水 滴 


99 .一 .所 -对 


图 1-81 组 成 心 形 
() 选择 “ 圆 角 和 矩形 工具 ”， 在 选项 栏 中 单 击 “ 填 爷 ”后 的 闫 色 ， 在 展开 的 面板 中 
单 击 “ 渐 变 ” 按 钮 ， 然 后 在 下 方 单 击 色 标 修改 颜色 ， 并 修改 旋转 渐变 角度 为 
-90， 如 图 1-82 所 示 。 
(2 在 画布 中 绘制 圆 角 矩形 ， 如 网 1-83 所 示 。 








PS 文件 (F) 编辑 (日 ”图 像 四 ”图 层 (L) 类 型 (Y) 选择 ( 


i 加 -|[ 末 ”|| 坟 | 轩 则 过 2:[=J][3 点 | 













































图 1-82 设置 选项 栏 1-83 绘制 圆 角 算 形 





() 3 选择 “椭圆 工具 ”， 设 置 填充 0 4 在 工具 箱 中 选择 “ 自 定 形状 工 
颜色 为 赣 色 ， 按 住 Shift 键 绘 具 ”， 如 图 1-85 所 示 。 


制 正 圆 ， 如 图 1-84 所 示 。 











国 皂 形 工具 
国 图 角 拒 形 工具 U 
= SS 情 图 工具 U 
全 学 IDFz 工 具 UU 
A 直 续 工 且 U 
县 目 定 形 六 工具 





图 1-84 绘制 正 圆 1-85 选择 “ 自 定 形状 工具 ” 








O 在 选项 栏 中 单 击 形状 展开 面板 ， 然 后 单 击 “设置 ”按钮 ， 在 下 拉 列 表 中 选择 “全 
ne So a 











() O 系统 弹出 对 话 框 , 单 击 “ 确 定 ” 按 钮 ， 

+ 名 | 亲 形 估 : _ | 对 到 边 汪 二 

二 | 亲 4 如 图 1-87 所 示 。 

下 | | 

nu 业 闪 Ag 

一 路 耻 昌 上 直 5 

VO9 没 a 
类 OLIO 2 


® TM 人 













Adobe Photoshop 
人 是 百 用 全 部 中 的 形状 车 换 当前 的 形状 人 








[ ”确定 |] [ 取消 | [ 追加 (A) 








图 1-86 选择 “全 部 ”选项 图 1-87 单 击 “ 确 定 ” 按 钮 
() 再 次 单 击 形状 ， 选 择 “ 罕 边 圆 (UN 在 画布 中 绘制 图 形 ， 如 图 1-89 
形 边框 ”， 如 图 1-88 所 示 。 所 示 。 











ET 








<4 四面 OC 

















图 1-88 选择 “ 窄 边 圆 形 边框 ” 图 1-89 绘制 图 形 
09 选择 “ 目 定 形状 工具 ”， 在 选 10 在 画布 中 绘制 图 形 ， 并 将 其 旋 
项 栏 中 选择 形状 “标志 3”， 转 ， 如 图 1-91 所 示 。 


如 图 1-90 所 示 。 
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-O01 人 OY: 
”| 效 忆 和 DD 涨 
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图 1-90 选择 形状 图 1-91 绘制 图 形 








(开始 图 形 绘制 中 的 布尔 运算 





布尔 是 类 国 的 数学 家 ， 他 在 1847 年 发 明了 
处 理 二 值 之 间 关 系 的 逻辑 数学 计算 法 , 包括 联合 、 
相交 、 相 减 。 在 图 形 处 理 操 作 中 引用 了 这 种 逻辑 
运算 方法 ， 以 使 简单 的 基本 图 形 组 合 产 生 新 的 形 
体 ， 称 之 为 “布尔 运算 ”， 如 图 1-92 所 示 。 
下 面 以 一 个 实例 介绍 布尔 运算 在 Photoshop 
中 是 如 何 操 作 的 。 
QO1] TE Ea 再 
ee a 
() 几 在 选项 栏 中 单 击剑 .按钮 ,选中 “固定 大 小 ” 
单 选 按钮 ， 并 设置 宽 、 高 为 200 px， 选 中 
“从 中 心 ” 复 选 框 ， 如 图 1-94 所 示 。 






口 加 角 失 形 工 上 
” 全 ) 怖 图 工具 











直线 工具 
磨 自 定形 居 工 具 





1-93 选择 “椭圆 工具 ” 


03 oe 如 图 () 


图 1-95 绘制 正 圆 


中 不 受 约 束 
一 圆 ! 绽 制 直 径 或 半径 ) 


1-92 布尔 运算 





1-94 设置 


在 工具 箱 中 选择 “路 径 选 择 
工具 ”， 如 图 1-96 所 示 。 





1-96 选择 “路 径 选 择 工具 ” 





0 S 选择 圆 ， 按 Ctrl+C 组 合 键 复制 ， 按 Ctrl+V 组 合 刍 粘贴。 然后 按 Ctr1l+T 组 合 键 
自由 变换 ， 按 住 Shift+Alt 组 合 键 从 中 心 等 比例 缩小 ， 如 图 1-97 所 示 。 

将 圆 的 直径 缩小 20 px， 也 就 是 使 守 、 高 为 180 px,， 在 “属性 ”面板 中 可 以 查看 ， 

UO 在 手动 无 法 精准 调 到 该 数值 时 也 可 以 在 “属性 ”面板 中 设置 ， 如 图 1-98 所 示 。 


















































图 1-97 复制 圆 并 缩小 图 1-98 设置 数值 


提示 在 设置 帘 、 高 参 
数 前 单 击 中 间 的 “链接 形 


() 在 选项 栏 中 单 击 “ 路 径 操 作 ” 按 钮 ， 如 图 1-99 
所 示 。 

































































































状 的 宽度 和 高 度 ” 按 钮 回 . PS 文件 日 ” 续 台 日 ”图 您 出 。 图 层 (类 型 M)， 选择 全 请 流 四 《视图 罕 口 (W) 帮助 (H) 
i 民 -| 填充 :[” :| 摘 为 :| 于 | | 点 -| |- 一 省 到 poo 制 @@ tH: [20 像 | | | 苔 | | 屁 坊 | 局 挤 过 用 
Ee NN 
i 3 En ca5 有 9 了 
. 
下 
0 在 展开 的 选项 中 选择 “ 减 ee 和 
由 | , -一 一 中 一 一 - 本 础 
去 顶层 形状 ”选项 ， 如 图 NA 
1-100 所 示 。 6 MB 
是 1 层 形状 | ,| 
(9 得 到 如 图 1-101 所 示 的 图 ee 中 | 
、 SN NT 、 > 
] 用 同样 的 方法 继续 复制 N 
圆 ， 并 绾 小 20 px， 如 图 Te 
山 图 1-100 选择 “ 减 去 顶层 形状 ” 图 1-101 图 形 效 果 
1-102 所 示 。 选项 


| | 再 次 在 选项 栏 中 设置 “合并 形状 ”， 以 显示 出 上 层 图 形 ， 如 图 1-103 所 示 。 



























































图 1-102 复制 圆 并 缩小 图 1-103 设置 “合并 形状 ” 








] 2 再 次 复制 并 缩小 20 px， 设 置 “ 减 去 顶层 形状 ”， 如 图 1-104 所 示 。 





图 1-104 减 去 顶层 形状 


] 3 Ea 
图 1-105 所 示 。 


aera Ls 
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图 
全 ) 类 图 工具 
全 莹 边 形 工具 
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1-105 重复 前 面 的 操作 
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1-106 选择 “ 德 形 工具 ” 
| O 按 CtrltT 组 合 键 变 形 图 形 ， 
按 住 Shift 键 旋转 45 度 ， 如 
图 1-108 所 示 。 
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\ 





图 1-108 旋转 图 形 


图 1-107 绘制 正方 形 


[py 其 调整 到 圆 的 上 方 ， 如 图 
1-109 所 示 。 





图 1-109 调整 到 圆 的 上 方 





] 在 选项 栏 中 设置 “与 形状 区 域 相交 
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图 1-110 设置 为 “与 形状 区 域 相交 ” 
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图 1-111 图 形 效 果 





， 如 图 1-110 所 示 ， 此 时 的 图 形 如 图 





完成 





图 1-112 完成 效果 


刚 开 始 接 触 APP UI 的 设计 新 手 们 问 的 最 多 的 就 是 有 关 尺 寸 的 问题 ， 界 面 多 大 ? 文字 
么 样 才 合 适 ? 对 于 安 卓 是 不 是 要 做 几 套 不 同 大 小 的 才能 适应 ? 下 面 对 这 些 问题 进行 解答 


加 iPhone 的 界面 尺寸 


iPhone 的 APP 界面 一 般 由 状态 栏 、 导 航 栏 、 


主 莱 单 栏 和 中 间 的 内 容 区 域 组 成 ， 如 图 


1-113 所 示 。 因 为 宽度 是 固定 的 ， 所 以 设计 开发 起 来 很 方便 。 


320 px 


状态 栏 高 20 px 
导航 栏 高 44 px 


xd 08t 


标签 栏 高 49 px 
工具 栏 高 44 px 


iPhone-iPhone3GS 


Qy 界面 尺寸 


3 i 面 下 方 的 区 域 ， 








640 px 


状态 栏 高 40 px 
导航 栏 高 88 px 


xd 096 


标签 栏 高 98 px 
工具 栏 高 88 px 


iPhone4-iPhone4S 


图 1-113 界面 组 成 





640 px 


状态 栏 高 40 px 
导 般 栏 高 88 px 


xd getT 


标签 栏 高 98 px 
工具 栏 高 88 px 





iPhone5-6 


ee 


包含 页 面 


面 名 称 ， 


机 为 分 


度 为 88 px。 
高 度 为 


回 ” 等 功能 按钮 ， 高 
分 类 内容 的 快递 寻 航 ， 


具体 的 尺寸 参数 如 表 1-1 所 示 。 


EA 


尺寸 


320 x 480 px 


ppi 


表 1-1 iPhone 的 界面 尺寸 


iPhone 上 的 英文 字体 为 HelveticaNeue， 中 文 一 


可 接受 下 线 


(80% 用 户 可 接受 ) 


状态 栏 高 

ol Tat a 

honeelol de oe WO OS O20 er 4 ns 2 ado 

Pneneeu HL Wd le seas 2 ol Wg xd ll RelpRe Wi 

ons 如 IOUGN 第 三代 入 
Ei | 


见 小 值 


(50% 以 上 用 户 认为 偏 小 ) 


度 


导航 栏 高 度 


44 px 





标签 栏 高 度 


黑体 或 者 黑体 - 


舒适 值 


49 px 





回避 le 


aa Dh, 资料 。 
另外， 我 们 也 可 以 把 有 党 得 好 的 应 用 截图 放 进 PS 里 对 比 ， 从 而 调试 自己 设计 的 文字 大 小 。 


(用 户 认为 最 舒适 ) 





注释 


四 iPad 的 设计 尺寸 
iPad 的 尺寸 示意 图 如 图 1-114 所 示 。 


768 px 


状态 栏 高 20 px 
导航 栏 高 44 px 


标签 栏 高 49 px 
工具 栏 高 44 px 





iPad1-iPad2 


xd 8t0Z 


图 1-114 iPad 的 尺寸 示意 图 


具体 的 尺寸 参数 如 表 1-3 所 示 。 
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mninl2 


iPad1 - 2 


家 2 人 SR] 


32pp ppi 


1536 px 


状态 栏 高 40 px 
导航 栏 高 88 px 


标签 栏 高 98 px 
工具 栏 高 88 px 





iPad3-iPad4 


高 度 


态 栏 高 度 六 栏 高 度 
| 40 px 


1 1024x768px x768 px 


op PX 


xd trzOT 


768 px 
状态 栏 高 20 px 
导航 栏 高 44 px 


标签 栏 高 49 px 
工具 栏 高 44 px 





iPad mini 


言说 


44 px 


px px 





表 1-3 iPad 的 设计 尺寸 





@ Android 的 尺寸 与 分 辨 率 


Android 有 数 不 清 的 机 型 和 尺寸 ,如 图 1-115 所 
示 ， 这 里 介绍 一 些 主流 的 设计 尺寸 ， 如 480 x 800、 
720 x 128。 众 所 周知 ， 安 卓 手 机 的 分 辨 率 发 展 的 越 
来 越 大 , 所 以 建议 使 用 720 x 1280 这 个 尺寸 来 设计 ， 
在 切 图 时 可 以 点 9 切 图 做 到 适 配 所 有 手机 。 

界面 的 基本 组 成 元 素 

与 iDS 一 样 , Android 还 是 有 状态 栏 、 导 航 栏 和 主 菜单 栏 , 以 720 x 1280 的 尺寸 来 设计 ， 
那么 状态 栏 的 高 度 应 为 50 px、 导 航 栏 的 高 度 为 96 px、 主 菜单 栏 的 高 度 为 96 px。 但 是 由 
于 是 开源 的 系统 ， 很 多 厂商 在 界面 上 想 尽 办 法 ， 因 此 这 里 的 数值 只 能 作为 参考 。 

Android 为 了 区 别 于 iOS， 从 4.0 开始 提出 了 一 套 HOLO 的 UI 设计 风格 ， 误 励 将 底 
部 的 主 菜 单 栏 放 到 导航 栏 下 面 ， 从 而 避免 点 击 下 方 材 料 误 点 虚拟 按键 ， 在 很 多 APP 的 新 
版 中 也 采用 了 这 一 风格 。 

文字 大 小 

Android 的 字体 为 Droid sans fallback， 这 是 谷歌 自己 的 字体 ， 与 微软 雅 黑 很 像 。 

Android 的 尺寸 
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图 1-115 Android 的 机 型 和 尺寸 











Android SDK 模拟 机 的 尺寸 如 表 1-4 所 示 。 
人 
屏幕 大 小 低 密度 (120) 中 等 密度 (160) 高 密 - 


WVGA800 ( 480 x 800 ) 
WOVGA400 ( 240 x 400 ) 
0 ne HVGA ( 320 x 480 ) WVGAB54 (480x 854 ) 640 x 960 
rane La co00) | eAnn (00xa0 
WVGA854 ( 480x854 ) on 
1536x 1152 
0 1024 x 768 2048 x 1536 
超大 屏幕 1024 x 600 1280 x 768WXGA ( 1280 x 800 ) | > i . 2560 x 1600 


表 1-4 Android SDK 模拟 机 的 尺寸 
Android 系统 dp/sp/px 换算 表 


Android 系统 dp/sp/px 换算 表 如 表 1-5 所 示 。 


比率 rate (针对 比率 rate (针对 Ee 
320 px) 640 ox 比率 rate (针对 750 px) 


表 1-5 Android 系统 dp/sp/px 换算 表 





名 称 分 辩 率 
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图 标 设计 基础 





图 标 通 常 给 用 户 传 达 第 一 视 客 感受 ， 它 可 以 体现 产品 的 风格 、 
功能 甚至 品质 。 设 计 一 款 图 标 不 是 信 手 折 来 的 ， 在 看 手 制作 图 标 前 
需要 了 解 APP 图 标的 基础 知识 ， 包 括 尺 寸 、 技 巧 、 图 标 分 类 等 ， 
MR lt 


一 本 





不 同系 统 的 图 标尺 寸 要 求 不 同 ， 合 适 的 尺寸 是 设计 一 个 优秀 图 标的 基础 ， 这 里 主要 介 
绍 Android、iPhone 和 iPad 的 图 标尺 寸 。 

系统 图 标的 常用 尺寸 有 16 x 16、24 x24、32 x 32、48 x 48。 

@ Android 常用 的 图 标尺 寸 


图 标的 所 在 位 置 不 同 , 尺寸 也 不 同 , Android 平 台中 APP 图 标的 常用 尺寸 如 表 2-1 所 示 。 





屏幕 大 小 局 动 图 标 操作 栏 图 标 | 上 下 文 图 标 系统 通知 图 标 ( 白色 ) 
320 x 480 px 48 x 48 px 32 x 32 px 16 x 16 px 24 x 24 px 不 小 于 2 px 
480 x 800 px 
480 x 854 px 72% 72 px 48 x 48 px 24 x 24 px 36 x 36 px 不 小 于 3 Dx 
540 x 960 px 
720 x 1280 px 48x 48 dp 32 x 32 dp 16x 16 dp 24 x 24 dp 不 小 于 2 dp 
1080 x 1920 px 144 x 144px 96 x 96 px 48 x 48 px 72 x 72 px 不 小 于 6 px 


表 2-1 Android 平台 中 APP 图 标的 常用 尺寸 


加 iPhone 图 标尺 十 
iPhone 平台 中 的 图 标尺 寸 如 表 2-2 所 示 。 





| APP Store | 程序 应 用 | 主屏 幕 Spot light 搜索 | 《标签 栏 ”| 工具 栏 和 导航 栏 
iPhone6 plus(@3 x ) 1024 x 1024 px 180 x 180 px 114 x 114 px 87 x 87 px 75 x 75 px 66 x 66 px 
iPhone6(@2 x) 1024 x 1024 px 120 x 120 px 114 x 114 px 58 x 58 px 75 x 75 px 44 x 44 px 


iPhone5 - 5C - 5S (@2x) | 1024 x 1024 px 120 x 120 px 114 x 114 px 58 x 58 px 75 x 75 px 44 x 44 px 
iPhone4 - 4S(@2 x) 1024 x 1024 px 120 x 120 px 114 x 114 px 58 x 58 px 75 x 75 px 44 x 44 px 


iPhone & iPod Touch 第 一 代 、 


第 二 代 、 第 三 代 1024 x 1024 px 120 x 120 px D7 x 57 px 29 x 29 px 38 x 38 px 30 x 30 px 


表 2-2 iPhone 平 台中 的 图 标尺 寸 


全 iPad 图 标尺 十 
iPad 设备 中 的 图 标尺 寸 如 表 2-3 所 示 。 


APP Store | 程序 应 用 主屏 幕 Spotlight 搜索 示 签 栏 | 工具 栏 和 导航 栏 








iPad3 -4 -5 - 6 
Ar - AIr2- MINI2 


1024 x 1024 px 180 x 180 px 144 x 144 px 100x 100 px | 50 x 50 px 44 x 44 px 








Spotlight 搜索 | ”标签 栏 | 工具 栏 和 导航 栏 


IPad1 - 2 1024 x 1024 px 90 x 90 px 72 x 72 px 5O x 50 px 25 x 25 px 22 x 22 px 


IPad minl 1024 x 1024 px 90 x 90 px 72 x 72 px 5O x 50 px 25 x 25 px 22 x 22 px 


表 2-3 iPad 设备 中 的 图 标尺 十 


(CI 图 标 分 类 


图 标 可 以 用 作 按 钮 或 把 界面 整体 分 隔 成 多 块 ， 还 可 以 起 到 装饰 和 视觉 引导 的 作用 ， 下 
面 介绍 图 标的 分 类 
Oi 
© a 应 用 图 标 通常 是 APP 的 入 口 ， ee 种 概括 性 视觉 表现 ， 
简洁、 显眼 且 友 好 地 传递 产品 的 核心 理念 和 内 涵 ， 如 图 2-1 所 示 。 


关 民国 四 时 


手机 白 度 支付 宝 WiF 亡 能 钥 91 桌 面 搜狗 输入 法 


四 乓 四 


白 度 云 爱 奇 艺 pps QQ 音乐 


Seoe 
微 信 QQ 阴阳 


微 博 爱 奇 艺 视频 








图 2-1 应 用 图 标 
(OO 功能 图 标 : 功能 图 标 一 般 代 表 可 操作 性 的 命令 、 文 件 、 设 备 或 目录 ， 如 图 2-2 
所 示 ， 并 包 和 触摸 、 选 中 三 种 状态 。 需 要 注意 的 是 ， 简 化 的 图 标 需 要 
表达 出 相应 的 含义 ， 在 小 尺寸 下 也 必须 清晰 、 允 懂 。 


[ed QA 党 


图 2-2 功能 图 标 





图 2-3 示意 图 标 





国 从 造型 分 类 

图 标 造型 表现 在 面 和 线 上 ， 运 用 这 两 种 基础 元 素 去 造型 可 以 进行 多 种 组 合 。 组 合 造型 
一 般 有 单 体 造型 、 多 个 元 素 组 合 造 型 ， 线 与 面 之 间 独 立 与 结合 变化 。 

是 简化 的 微 写实 图 标 


这 类 图 标 一 般 为 彩色 ， 在 造型 和 组 合 上 较 写 实 ， 是 
从 写实 过 渡 而 来 的 简化 ， 又 接近 剪影 ， 同 属于 扁平 简化 
设计 ， 如 图 2-4 所 示 。 这 类 图 标 主要 利用 面 和 颜色 来 
进行 造型 的 设计 ， 在 质感 风格 上 有 纯 平面 、 折 又 、 轻 质 
感 、 折 纸 风 、 长 投影 、 微 立体 等 多 种 。 

这 种 图 标的 优点 相对 于 勇 影 图 标 来 说 ， 更 容易 塑造 
风格 ， 丰 富 易 用 、 辨 识 度 高 ， 可 作为 主要 级 别 的 图 标 。 图 2-4 简化 的 微 写实 图 标 

@ 剪影 的 正 负 形 图 标 





这 类 图 标 一 般 为 单 色 ， 相 比 上 一 类 图 标 而 言 更 加 简洁 、 抽 象 ， 经 过 对 特点 、 外 形 的 高 
度 提 炬 更 容易 识别 理解 ， 代 表 着 现代 极 简 主 义 。 
这 类 图 标的 优点 是 简 污 明了 ,有 具有 一 定 的 拓展 性 ,可 以 完成 一 些 抽 和 象 词汇 的 图 形 传达 。 


负 形 图 标 也 叫 线形 图 标 ,， 是 以 线 绘制 的 图 形 ,高度 的 轮 慷 概括 ,要 求 精准 到 位 ， 
如 图 2-5 所 示 。 负 形 剪 影 是 所 有 图 标 中 最 讲究 也 是 最 难 表 达 的 一 种 风格 ， 它 
轻 表 达 却 重 设计 感 ， 更 具有 想象 力 和 拓展 性 。 

正 形 图 标 是 以 面 绘制 的 图 形 以 及 和 线 综合 表现 的 图 形 。 通 常 与 负 形 图 标 之 间 做 
当前 状态 的 转换 ,如 图 2-6 所 示 。 正 形 图 标 由 于 面积 占 比 大 , 视觉 吸引 力 更 强 。 


2-5 负 形 图 标 2-6 正 形 图 标 





更 辩 gU| Photoshop 创意 入 p 所 未 设计 从 入 门 到 精通 





国 从 界面 位 置 和 模块 分 类 
我 们 知道 APP 界面 设计 在 不 同 的 位 置 上 图 标的 设计 形式 也 会 不 同 ， 从 界面 的 位 置 和 
模块 分 类 如 图 2_7 所 示 。 


界面 图 标 
© G&G CQ © 


未 关注 已 关注 取消 关注 私语 


OO OVO DO 


感情 状态 男 女 跳蛋 高 线 使 用 小 H 


四 X 昌 5 由 电 于 


拍摄 图 片 取消 / 关闭 语音 文字 投票 话 简 / 麦克 键盘 


十 Xx 


ET 


其 他 图 标 


© 18*18px / GPS /发帖 人 地 址 


©) 30*30px / 搜索 图 标 





图 2-7 从 界面 位 置 和 模块 分 类 


CI 图 标 设计 优点 


图 标 以 图 形 符号 的 形 陈 来 处 理 信 息 ， 其 优点 如 下 。 





人 @@ 易于 被 快速 识别 ， 便 于 记忆 ， 具 有 直观 性 ， 产 生 国际 通用 性 。 
名 图 标 具 有 形 、 意 、 色 等 多 种 刺激 ， 传 递 的 信息 量 大 。 
四” 坑 干 扰 能 力 强 、 图 标 大 小 可 调 、 表 示 视 觉 和 空间 概念 、 便 于 布局 。 


CI 图标 设计 原则 


图 标 设计 需要 考虑 的 因素 很 多 ， 遵 循 相应 的 原则 可 以 避免 很 多 问题 。 

0 传达 含义 清晰 、 准 确 、 容 易 记忆 

图 标 一 般 充当 指示 、 提 醒 、 概 括 、 表 述 等 作用 ， 面 对 图 标的 设计 ， 业 界 一 直 有 一 个 标 
准 : “对 于 其 含义 的 理解 不 需要 额外 的 文字 说 明 。 ”每 个 图 标 用 简单 的 元 素 表达 清晰 的 概 
念 并 和 产品 本 身 进 行 联系 的 方式 是 我 们 在 图 标 设计 中 尤其 需要 注意 的 。 

0 遵循 用 户 使 用 习惯 

在 进行 图 标 设计 时 要 根据 用 户 的 使 用 习惯 来 设计 ， 当 用 户 习 惯 了 圆 角 的 图 标 之 后 我 们 
就 不 能 擅自 改变 图 标的 形状 ， 同 时 还 需要 考虑 使 用 人 群 的 国家 和 地 域 文化 ， 以 此 来 考量 用 
户 的 使 用 习惯 。 

@ 功能 图 标 设计 简单 明了 

图 标的 设计 如 果 过 于 复杂 ， 那 么 就 会 让 用 户 难 以 了 解 APP 软件 的 操作 ， 增 加 用 户 使 
用 的 难度 ， 当 用 户 产 生 厌 烦 情 绪 后 会 丢弃 该 APP 软件 ， 所 以 在 进行 设计 时 要 遵循 简单 明 
了 的 原则 ， 设 计 便 于 用 户 操 作 的 APP 软件 。 








@ 二 明确 目标 客户 群 
在 开始 设计 图 标 之 曾 首 先 要 弄 清楚 目标 客户 群体 是 谁 ? 这样 才 可 以 根据 确定 好 的 目标 
群体 来 进行 图 标 设计 。 
(3 突出 个 性 
如 果 设 计 的 APP 图 标 与 其 他 APP 相似 ， 则 很 容易 造成 用 户 的 困惑 ， 也 会 让 用 户 错误 
下 载 与 图 标 相 似 的 APP 软件 ， 如 果 该 软件 造成 了 用 户 不 好 的 体验 ， 那 么 也 会 令 用 户 对 你 
的 APP 产生 怀疑 ， 拒 绝 下 载 所 开发 的 APP 软件 。 
(8 风格 统一 、 整 体 性 强 
一 套 风 格 统一 的 图 标 是 进行 图 标 设计 的 基本 原则 ， 整 体 性 强 的 设计 会 比 零散 的 设计 更 
有 品质 ,更 容易 让 用 户 理解 ,特别 是 企业 产品 等 图 标 设计 ,统一 的 概念 从 VI 阶段 就 已 经 贯彻 ， 
在 图 标 设计 中 我 们 需要 引入 一 些 VI 的 思想 来 规范 它 。 一 套 设 计 精 良 、 统 一 性 足够 好 的 图 
标 不 仅 能 够 引起 用 户 对 品牌 的 共鸣 , 甚至 可 以 进一步 带动 界面 部 分 的 设计 ,以 相同 的 质感 、 
色 系 、 光 照 效果 等 技巧 统一 整个 产品 的 视觉 感受 
风格 的 统一 包括 造型 的 轮廓 粗细 的 统一 、 颜 色色 调 与 调和 的 统一 、 材 质 与 纹理 的 统一 
和 配色 协调 
给 图 标 添 加 颜色 是 解决 视觉 冲击 力 的 一 种 表现 手段 ， 赋 予 图 标 什么 样 的 个 性 或 突出 重 
点 一 般 都 会 添加 闫 色 。 在 整体 界面 中 有 篆 景 色 和 主导 色 ， 一 般 选 择 的 图 标 颜 色 要 侧重 于 点 
缀 色 或 者 着 重 色 ， 而 其 他 不 太 重 要 的 图 标 颜色 尽量 选择 中 性 的 颜色 ， 如 低 纯度 的 蓝 色 ， 因 
为 在 Ul 界面 设计 中 蓝 色 几乎 和 黑 、 白 、 灰 并 称 万 用 色 。 有 时 候 UI 界面 或 图 标 整 体 偏 暖 或 
冷 就 是 因为 补 色 没有 运用 好 。 
国 兼容 各 种 应 用 尺寸 ， 主 体 与 细节 对 比 合适 
在 设计 图 标 时 尺寸 要 考虑 周全 ， 保 证 图 标尺 寸 比 例 的 准确 性 ， 因 此 除了 要 考虑 图 标 在 
小 尺寸 屏幕 上 的 完美 展示 之 外 还 要 考虑 大 尺寸 的 屏幕 ， 让 图 标 适 用 于 不 同 屏幕 大 小 的 移动 


设备 。 


国 将 合 主 题 文化 

有 主题 性 文化 的 图 标 一 般 更 具 娱 乐 性 和 欣赏 性 ， 图 标 设计 本 身 也 是 有 故事 性 的 ， 在 单 
独 的 个 体 中 体现 出 “道具 ”的 概念 ， 更 容易 引起 用 户 的 兴趣 。 

类 似 风格 的 图 标 我 们 常见 于 PC 游戏 、TV 游戏 、 电 影 网 站 等 娱乐 型 产品 中 ， 独 特 的 
风格 以 及 直观 的 主题 文化 宣扬 是 其 成 功 的 法 宝 。 

主题 性 的 设计 有 时 候 更 多 的 是 对 某 一 种 文化 或 者 某 一 种 现象 的 致敬 ， 其 中 会 出 现 大 量 
复 现 的 元 素 ， 当 然 也 有 设计 师 自己 钟爱 的 元 素 。 


DB 图 标 设计 流程 


图 标 设计 需要 设计 师 进 行 造型 构思 、 设 计 、 配 色 、 调 整 细 市 等 一 系 促 过 程 。 








更 哆 2U Photoshop 创意 傅 p 所 未 设计 从 入 门 到 精通 





四 绘制 草图 

对 图 标 进 行 基础 构思 ， 将 灵感 男 在 纸 上 ， 享 图 不 必 在 意 细 敢 ， 如 图 2-8 所 示 。 

灵感 的 来 源 可 以 通过 两 个 方面 获得 。 

Di ED I 
产生 联想 和 逻辑 关系 ， 甚 至 是 
因果 关系 的 具象 物体 。 


@@ 搜集 素材 : 平常 收集 各 种 优秀 
的 国内 外 APP 图标 设计 ， 在 
需要 时 从 中 找寻 灵感 。 





四 确定 风格 
不 同 的 图 标 用 途 决 定 了 风格 的 取 疝 。 
设计 造型 


根据 特点 、 功 能 分 析 结 构 、 设 计 并 制作 图 标 ， 在 制作 前 选择 一 球 设 计 软 件 ， 如 
Photoshop、lllustrator 等 。 


二 颜色 定位 

根据 风格 、 功 能 选择 相应 的 颜色 ， 以 及 根据 APP 界面 整体 效果 合理 配色 。 
团 细节 调整 

对 阴影 、 光 效 、 尺 寸 等 细节 进行 调整 


ER 设计 技巧 
通常 情况 下 图 标 是 用 户 对 应 用 的 第 一 印象 ， 当 用 户 在 应 用 市 场 中 看 到 应 用 的 图 标 时 ， 
他 们 融会 根据 看 到 的 图 标 来 推测 应 用 的 使 用 体验 。 如 果 图 标 看 上 去 优美 、 精 致 ， 用 户 融会 
下 意识 地 认为 这 个 应 用 也 能 够 带 来 优秀 的 使 用 体验 。 
《网 形状 独特 
2-9 中 的 4 个 图 标 各 不 相同 ， 有 的 使 用 了 大 量 的 颜色 ， 有 的 使 用 了 梯度 颜色 ,但 
是 它们 都 有 一 个 共同 点 ， 那 就 是 使 用 了 简单 的 形状 ， 这 种 设计 能 够 让 用 户 立 即 记 住 这 个 


应 用 。 


Vimeo Flipboard Colorfull Clear 





YY 





2-9 形状 独特 的 图 标 








国 谨慎 选 择 颜 色 
图 标 设计 要 限制 应 用 颜色 的 色调 ， 使 用 1~2 个 色调 的 颜色 就 足够 了 ， 颜 色 过 多 的 图 
标 不 容易 吸引 用 户 。 


二 避免 使 用 照片 

注意 ， 不 要 在 图 标 设计 中 使 用 照片 。 如 图 2-10 所 示 ， 可 以 看 出 当 使 用 酒杯 的 照片 作 
为 应 用 图 标 时 会 给 用 户 简陋 的 感觉 ， 而 经 过 设计 后 ( 最 右 侧 图 ) 一 种 优雅 感 会 让 用 户 对 这 
个 应 用 产生 兴趣 。 





图 2-10 避免 使 用 照片 
国 不 要 使 用 太 多 的 文字 设 


PNess Pocket 计 
有 不 少 设 计 者 为 了 让 用 户 看 到 上 自己 的 

APP 应 用 软件 会 在 图 标 上 添加 文字 让 用 户 知 
道 应 用 的 名 字 ， 但 是 我 们 要 明 白 图 标 在 手机 
设备 上 会 变 得 很 小 ， 有 时 候 会 让 用 户 看 不 清 
楚 图 标 上 的 文字 ,只 会 让 用 户 有 不 好 的 体验 。 
在 应 用 中 只 应 该 出 现 Logo， 而 不 要 将 应 用 的 
全 称 添 加 进去 。 对 于 图 2-11 中 这 些 文字 应 

用 的 图 标 设 计 ， 如 果 将 应 用 的 名 称 状 加 到 图 
标 中 ， 会 给 人 一 种 凌乱 的 感觉。 图 2-11 文字 应 用 的 图 标 设计 


2 2 人 不同 风 格 图 标 设计 








下 面 对 立体 图 标 、 写 实 拟 物 图 标 、 局 平 化 图 标 等 多 种 风格 的 图 


标 进 行 介 绍 。 


CEED 立体 图 标 设计 


立体 图 标 为 表现 立体 感 ， 通 党 是 通过 阴影 、 高 光 等 光影 细 方 实现 的 。 本 实例 主要 通过 
图 层 样 式 来 制作 立体 图 标 ， 制 作 流程 如 图 2-12 所 示 。 








2-12 立体 图 标的 制作 流程 


() | 新 建 一 个 尺寸 大 小 为 1000X1000 px 的 文 
| 提 示 。 按 At+Delete 
档 ， 如 图 2-13 所 示 。 组 合 键 填充 前 景色 ， 
02 设置 前 景色 为 #80b5el， 按 AlttDelete 组 foe 





背景 色 。 


合 键 填充 画布 ， 如 图 2-14 所 示 。 









































名 称 (N): 未 标题 -2 新 的 
于 预 设 (p): 自 定 ~ 加 取消 
ed . 
宽度 ( 1000 像素 一 吓 除 预 误 (D )... 男 示 加 到 色 板 
高 度 (H): 1000 像素 当前 
分 辩 率 (R): 72 像素 /英寸 “~ “a © H: OL: 
颜色 模式 (M): RGB 颜色 v 8 位 ~ ©s: Ba - 
背景 内 容 (C): 白色 ~ 国 表 大 小 : 轩 : ©b: - 
全 | 高 级 2.86M UR: 
颜色 醒 置 文件 (9): sRGB IEC61966-2.1 ~ © : 。 
像素 长 宽 比 (X): 方形 像素 ~ 只 有 Web 颜色 80b5ell 
图 2-13 新 建文 档 图 2-14 设置 前 景 
有 上 HT、 65 汉 2 关中 他 S72 
() 3 在 工具 箱 中 选择 “ 圆 角 和 矩形 工具 ”， 在 选项 栏 中 设置 贺 角 半径 为 60 px， 如 图 
2 a 


(4 单 击 左 侧 的 | 头 j 按 钮 ， 然 后 选中 “固定 大 小 ” 单 选 按钮 ， 设 置 宽 、 高 的 参数 为 
400 px， 如 图 2-16 所 示 。 


OH ww: 
站 Am 





图 2-15 设置 圆 角 的 半径 图 2-16 设置 固定 大 小 


(})S 在 画布 中 单 击 并 拖 动 鼠标 绘制 () 在 “图 层 ” 面 板 中 双击 该 图 层 
圆 角 和 矩形， 如 图 2-17 所 示 。 的 名 称 ， 修 改名 称 为 “底层 ”， 
如 图 2-18 所 示 。 





] 一 混合 选项 


2-17 绘制 圆 角 和 矩形 


图 2-18 修改 名 称 


在 “图 屋 ” 面 板 中 双击 “ 搬 层 ”图 层 右 侧 的 空白 处 ， 打开 “图 层 样式 ”对 话 框 ， 


如 图 2-19 所 示 。 





选择 “内 发 光 ” 选 项 , 设置 混合 模式 为 “ 柔 光 ”不 透明 度 为 84%、 发 光 颜 色 为 白色 ， 
以 及 阻塞 为 46、 大 小 为 10 px， 如 图 2-20 所 示 。 





常规 混合 














斜面 和 浮雕 
等 高 线 
纹理 
描 边 

内 阴影 
颜色 亚 加 
渐变 严 加 
图 案 释 加 
外 发 光 
投影 




























































































混合 模式 (D): 


局 -取消 
不 透明 度 (0): 新 建 样式 (W)… 


新 建 样式 (W) 


团 预 览 (V) 








言明 站 
一 高 级 混合 


填充 不 透明 度 (F): 
挖 空 (N): 

将 内 部 效果 混合 成 组 (0) 

将 前 贴图 层 混合 成 组 (P) 

透明 形状 图 层 (D) 

图 层 蒙 版 隐藏 效果 (5) 

矢量 蒙 版 隐藏 效果 (H) 


混合 颜色 带 白 : 灰色 ~ 
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2-19 


“图 层 样 式 ” 对 话 框 










样式 


漫 合 选 珊 : 屋 认 | 
口 斜面 和 浮雕 
等 高 线 
口 纹理 























描 边 
































二 投影 


日 
四 具有 


颜色 到 加 
口 新 变 亚 加 
图 案 亚 加 
口外 发 光 












混合 模式 (6): 柔 光 M 
不 透明 度 (0): = 84  % 
杂 色 (NN): (一 0 % 


OL 















方法 (Q): 柔和 ~ 

源 : 〇 居中 但 ) ” 回 边 绢 (6) 
阴 塞 (CC): 5 一 一 4  % 
大 小 G): 吧 像素 
































高 线 : | 4 - 消除 锯齿 (0) 


范围 R): 一 一 > 50 % 
拌 动 Q): (5 ms 0 % 


设置 为 默认 值 复位 为 默认 值 















图 2-20 设置 “内 发 光 ” 


在 打开 的 对 话 框 中 选择 第 


选择 “渐变 县 加 ”选项 ， 在 右 侧 单 击 渐 | 


变 后 的 闫 色 ， 如 图 2-21 所 示 。 




































































可 渐变 昌 加 
混合 选项 可 认 一 
混合 模式 (0): 正常 ~ 回信 色 
忆 纹理 iW: R17] | R&A 
可 指 边 样式 (): 线性 | 点 技 可 编 缉 白 变 ” 国 与 图 层 对 齐 人 
二 内 阴影 角度 (N): ( | 90 度 
可 内 发 光 
回 光泽 缩放 (5): ， PS 100  % 
| 颜 色 到 加 设置 为 默认 值 | [ 复位 为 默认 值 
可 图 案 亚 加 
器 外 发 光 
器 投影 











图 2-21 单 击 颜色 


的 颜色 ， 


一 个 色 标 ， 然 后 蛙 击 后 部 
如 图 2-22 所 示 。 


























名 称 (N): ” 自 定 


平滑 度 (M): | 100| ，|% 





渐变 类 型 (T): 实 底 ~ 

















位 置 (C): % 




















图 2-22 单 击 颜色 





更 哆 ZU Photoshop 创意 合 p 质 索 设 计 从 入 门 到 精通 





| 在 打开 的 “失色 器 ”对 话 框 中 设置 两 | 晶 设置 第 二 个 色 标 的 颜色 
色 为 #187dd9， 如 图 2-23 所 示 。 为 #8ad9f8， 如 图 2-24 
所 示 。 



















新 的 


EF 载 入 (D).. 
< 存储 (S)..… 
添加 到 色 板 
名 称 (N): ” 自 定 [新建 (W) | 
CD K] 
加 H: OL: 渐变 类 型 (T): 实 底 ~ 
A 9: Ba - 平滑 度 (M): 100 | % 
AA 有 。 国 人 站 
E 色 标 


图 2-23 设置 颜色 
| 3 单 击 “确定 ”按钮 ， 此 时 的 图 像 效 果 如 图 


2-25 所 示 。 [党 *] 不肖 明度 : [100%| ~ ] 
] 4 按 Ctrl+J 组 合 键 复制 一 层 ， 重 命名 为 “ 厚 雇 定 : 加 < 中 日。 请 :ll00%| "| 

















国 @ 国 > 
Hl 
| 

4 

司 








当前 


四 Da 四 工 


深 采 宁 




















| | 


度 ” 并 移 到 “底层 ?的 下 层 , 如 图 2-26 所 示 。 = 二 


六 





图 2-25 图 像 效果 图 2-26 调整 图 层 顺序 
] S 双击 进入 “图 层 样式 ”对 话 框 ， 修 改 “ 内 发 光 ” 参 数 ， 如 图 2-27 所 示 。 人 然后 修 
改 “ 渐 变 对 加 ”的 渐变 色色 标 1、 色 标 3 的 其 色 为 #004889; 色 标 2 的 颜色 为 
#004889， 位 置 为 50%) ， 和 角度 为 0 度 ， 如 图 2-28 所 示 。 















































Te 样式 渐变 晋 加 
浊 合 运 员 各 认 和 新 变 
笠 面 和 浮 央 北 侣 选项 :于 认 汪 
描 边 : , 等 高 线 
口 内 阴影 本 加 纹理 
口 措 边 
一 一 器 内 阴影 
[| 膨 0 | >、 vv 
可 渐变 亚 加 缩放 (5): 一 100  % 
口 图 案 琶 加 回 光泽 
一 器 颜 色 又 加 [| | 
= 
器 图 案 琶 加 
拌 动 (0): C= 0 % 回 外 发 光 
[必要 为 束 认 值 ] [ 复位 为 默认 值 | 加 投影 
图 2-27 修改 “内 发 光 ” 参 数 图 2-28 修改 “渐变 到 加 ”参数 





] 


] 7 站 证 放 


we 


后 面 的 图 案 ， 如 图 2-29 所 示 。 

















| 混合 选项 于 计 
回 斜面 和 浮 风 









































本 投影 


混合 模式 (6): 正片 亚 底 ~ 国 国 



























不 透明 度 (D): Se 9593  % 
角度 (A): ( 上 ) 5 度 回 使 用 全 局 光 (G) 
距离 0): OO 40 像素 
扩展 QR): C 0 % 
大 小 (9): 一” 50 像素 

品质 
等 高 续 : 下 口 | 消除 锯 具 人) 

杂 色 (N) | % 





图 层 控 空 投影 人) 


设置 为 默认 值 夏 位 为 默认 值 








] 


图 人 到 29 设置 “投影 ” 


单 击 “确定 ”按钮 后 的 图 像 效 
果 如 图 2-31 所 示 。 





内 


ul 


Wh | 


充 为 0%9， 如 图 2-34 所 示 。 


2 +T 组 会 图 层 椰 格 化 图 层 
投 Ctrl#]J 组 合 健 复 PP 型 :| 国 日 荆 了 。 栅 格 化 图 层 样式 
制图 层 ， 然 后 单 击 | 正常 _ | 7 艇 明度 |】 启用 图 层 芝 版 
I Wwe: 图 丰 ”填充 : 停 用 矢量 蒙 版 
鼠标 右键 ， 执 行 “ 清 除 图 层 样 Btn 创建 劳 贴 蒙 版 
| | es 
全 人 a 链接 图 层 
命令 ， 如 图 2-33 所 示 。 = 选择 链接 图 层 
父 7 尖 ee I 399? 
修改 名 称 为 “发 光 ”， pe a 本 mm a 
调整 至 “背景 ”图 e | 品 最 
alk 昌 效果 复制 形状 尾 性 
层 ln Dal 证 设 置 填 名 内 发 光 粘贴 形状 尾 性 
@@ 渐变 亚 加 sy 
| @@ 投影 从 陋 高 图 层 释放 
时 | | 四 晃 合并 图 层 入 
re 合并 可 见 图 层 
一 拼合 图 像 


图 2-31 图 像 效 果 





选项 并 设置 参数 ， 其 中 投影 颜色 为 #003c6e， 


Nt 





然后 单 击 “ 等 高 线 ” 


高 线 ， 如 图 el) 所 示 。 


预 设 (P): 自 定 
一 映射 

















图 2-30 设置 等 高 线 


使 用 键盘 上 的 方 同 键 癌 下 移动 
10 px， 如 图 2-32 所 示 。 


\ 





2-32 向 下 移动 























图 2-33 执行 “清除 图 层 样式 ”命令 









































图 2-34 调整 图 层 顺 序 并 填充 








Photoshop 创意 


pt 设计 A 和 I ] 到 精通 








双击 进入 “图 层 样 式 ” 对 话 框 ， 选 择 “ 投 影 ” 选 项 ， 并 设置 参数 ， 其 中 投影 闫 


fe 


如 图 2-35 所 示 。 


单 击 “ 确 定 ” 按 钮 ， 此 时 的 图 像 效 果 如 图 2-36 所 示 。 





样式 


| 混合 选项 : 自 定 


口 笠 面 和 浮雕 
等 高 线 

















回回 回回 回回 回 | 
下 

让 哎 局] 人 
车 


| 














投影 - 

结构 

混合 模式 (6): 滤 色 be | 

不 透明 度 (D): 。 = 75 % 
角度 :| 55。 度 回 使 用 全 局 光 () 
距 高 D): CT 0 像素 
扩展 R): 2 全 40 % 
大 小 (S): 100 ”像素 

品质 
等 高 续 : | “| 站 | 消除 锯 具 () 
杂 色 人: 于 |% 

J 图 层 控 空投 影 (U) 


设置 为 默认 值 复位 为 默认 值 








图 2-35 设置 “投影 ” 





























和 WE: 因由 站 填 刘 :| 











.| 这 

















© | 于 版 


过 效果 


加 门 受 访 


地 新 受 晋 加 

















EE 


地 效果 


时 门 受 说 
过 新 县 车 加 















































Wa lh 





2-37 新 建 图 层 


笔 大 小 ， 然 后 单 击 绘制 
Nitin 如 图 2-39 所 示 。 


24 
25 


改 便 度 为 0%， 如 图 2-38 所 示 。 





图 2-36 图 像 效 果 


在 最 上 层 新 建 一 层 , 重 命 名 为 “高 光 ”， 
如 图 2-37 所 示 。 

ga FE NE) ee .Ls I | 
#4dc9f0， 在 画布 上 单 击 鼠标 右键 ， 修 





ze 一 


Oo | 




















































































































































































pr em 
而 
于 










































































































































































图 2-38 修改 画笔 参数 


Wy 按 Ctrl+T 组 合 键 将 图 形 拉 伸 变 
形 ， 如 图 2-40 所 示 。 





2-39 绘制 圆 图 2-40 拉 伸 变形 


由 吕 使 用 “和 窍 形 选 框 工 具 ” 框 选 圆 D9 按 Delete 键 删除 选区 图 像 ， 如 
的 下 半 部 分 ， 如 图 2-41 所 示 。 图 2-42 所 示 。 





图 2-41 框 选 图 2-42 删除 
3 按 Ctrl+D 组 合 键 取 消 选 区 ， 按 3 在 “ 几 层 ”面板 中 修改 不 透明 


Ctrl+T 组 合 键 将 图 形 缩 小 ， 如 度 为 60%， 如 图 2-44 所 示 。 
图 2-43 所 示 。 











地 靳 全 营 加 


图 2-43 缩小 图 形 图 2-44 修改 不 透明 度 











32 选择 除 背 景 外 的 其 他 图 层 ， 单 击 鼠 标 右键 ， 执 行 “ 从 图 层 建 并 组 ”命令 ， 如 图 
2 
3 3 设置 前 景色 为 白色 ,选择 “椭圆 工具 ”绘制 正 圆 ， 并 在 “属性 ”面板 中 设置 宽 、 
局 参数 为 205 px， 如 图 2-46 所 示 。 








| 上 


过 新 变 亚 加 复制 形状 屋 性 
地 返 影 粘贴 形状 屋 性 


从 隔 高 图 屋 冬 放 





2-45 执行 “从 图 层 建立 组 ”命令 图 2-46 设置 宽 、 高 


3 在 “图 层 ” 面 板 中 选择 圆 和 组 1， 在 选项 栏 中 单 击 “垂直 居中 对 和 齐 ” 和 “水 平 
居中 对 齐 ” 按 钮 ， 如 图 2-47 所 示 。 
3 S 执行 操作 后 的 效果 如 图 2-48 所 示 。 





PS 文件 编 缉 ( 日 ”图 像 加 ”图 层 刷 类 型 (Y) 选择 ( 引 ” 滞 第 四 ”视图 IV| 窗口 (W) 者 


i 4 ”| [Vi 自动 选择 : | 图 层 ”*| | 门 显示 变换 控件 | 醒 
立体 ,psd 加 66.7%IRGB/8)* x 





图 2-47 单 击 按钮 图 2-48 效果 


3 在 “图 层 样 式 ” 对 话 框 中 选中 “和 斜面 和 浮雕 ”选项 ， 设 置 参数 ， 其 中 高 光 的 闫 
色 为 #5dc5f4、 阴 影 的 颜色 #1c81da， 如 图 2-49 所 示 。 
3 WW 选中 “等 高 线 ” 选 项 ， 在 右 侧 单 击 等 高 线 ， 如 图 2-50 所 示 。 


























各 斜面 和 浮雕 
结构 
温 合 进项 壮 认 | ES 
EE 样式 (T): 枕 杖 浮雕” 
财 符 言 毕 方法 (Q): 平滑 ~ 
总 纹 理 深度 D): 时 25 184 % 
] 描 边 方向 : © 上 ”图 下 
回 内 阴影 大 小 (Z): 5 70 ”像素 
回 内 发 光 软化 (F): 16 ”像素 
口 光泽 
阴影 
口 颜色 又 加 a 
癌 新 变 要 加 ie” YE, 
i | 。 | 回 使 用 全 局 光 (G) 
画 肌 有 光泽 等 高 线 : -| 回 消 脓 锯齿 人 
高 光 模 式 (H): 源 色 ~ Ol 
不 透明 度 (o): ES 71 % 
阴影 模式 (A): 正片 县 底 ~ 国 国 
不 透明 度 (C)， 一 2 33  % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 














口 内 阴影 

回 内 发 光 

回 光泽 
颜色 亚 加 

| 新 变 亚 加 

-| 图 案 秋 加 
外 农 光 

癌 投影 


等 高 续 : 





| - 消除 锯齿 (0) 











图 2-49 设置 “和 斜面 和 浮雕 ” 


上 


图 2-51 所 示 。 


预 设 (P): 自 定 
一 映射 一 





人 
; 
取消 


载 入 (L).. 
存 博 (5).… 








新 建 … 











图 2-51 调整 曲线 


4 双击 进入 “图 层 样式 ”对 话 框 
选择 “内 阴影 ”选项 ， 设 置 参数 

如 图 2-53 所 示 。 

内 阴影 

结构 


混合 模式 (6): 正片 人 到底 ~ 加 到 
不 透明 度 (0): 十 8  % 


角度 (A): ( ，] -50 度 回 使 用 全 局 光 (G) 


像素 
阻塞 (0): G 0 % 
大 小 (S): 瑟 3 像素 


品质 
| G - [| 消除 锯齿 (L) 


杂 色 人 N): (5 0 % 


设置 为 默认 值 复位 为 默认 值 


样式 
混合 选区 :默认 
二 斜面 和 浮雕 
口 等 高 续 
口 纹理 
口 描 边 
口 颜色 到 加 
| 渐变 人 加 
口 图 案 亚 加 
回 外 发 光 
| 投影 


距离 |O): /一 一 一 9 | 2 





图 2-53 设置 “内 阴影 


在 打开 的 对 话 框 中 调整 曲线 ， 如 





中 


2-50 单 击 等 高 线 


扫 'Ctrl+]J 


组 合 键 复制 图 属 ， 然 


后 双击 缩 览 图 ， 在 打开 的 对 话 框 
中 修改 颜色 ， 如 图 2-52 所 示 。 











4 


?9 





加 只 有 Web 颜色 


国 标 
颜色 库 设 





128 53 I% 
©@G6: 181 M: 21 % 
B86 225 Wl 5 % 


图 2-52 修改 颜色 


选择 “外 友 光 ”选项 , 设置 参数 ， 





样式 

浊 侣 通 员 吉 认 

和 而 和 3 六 
i 不 活 明 度 (0): 

eo 杂 色 人 N): 

器 描 边 S 

可 内 阴影 

口内 发 光 

口 光泽 

局 颜色 到 加 

局 渐变 到 加 


] 图 5 口 
| 图 案 到 加 


方法 (9): 
扩展 (P): . 
大 小 (S): 


CBN): 
抖动 QO): 


高 线 ， 如 图 2-54 所 示 。 


正常 
杀 和 ~ 


0 % 
日 ”像素 





|_ 设置 为 默认 值 | | 复位 为 默认 值 | 








图 2-54 单 击 等 高 线 








4 在 打开 的 对 话 框 中 调整 曲线 ， 如 | 单 击 “确定 ”按钮 ， 此 时 的 图 
图 2-55 所 示 。 像 如 图 2-56 所 示 。 


预 设 (P): 自 定 
一 映射 

















图 2-55 调整 曲线 图 2-56 图 像 效 果 


4 按 Ctrl+J 组 合 键 复制 图 层 ， 然 后 双击 进入 “图 层 样 式 ” 对 话 框 ， 选 择 “ 渐 变 鞋 
加 ”选项 ， 设 置 参 数 ， 其 中 渐变 色 的 第 一 个 色 标 磊 色 为 #003874， 第 二 个 色 标 
颜色 为 #0492c2、 位 置 为 50%， 第 三 个 色 标 颜色 为 #049dd7， 如 图 2-57 所 示 。 
4 单 击 “确定 ”按钮 ， 再 次 复制 一 层 ， 按 Ctrl+T 组 合 键 将 其 缩小 为 195X 195 px， 
如 图 2-58 所 示 。 

















































EE | 渐变 亚 加 
温 合 选 贡 各 认 
1 混合 模式 (0): 正常 ~ 辣 仿 色 
站 等 言 绪 不 透明 度 人 PP) 一 ez 100  % 
癌 反 向 R) 
年 RU 本 7” 团 与 图 层 对 齐 () 
角度 NW: (上 ) 5 度 
昕 地 (5): 一 ”一 一 一 - 100 % 








设置 为 默认 值 夏 位 为 默认 值 

















图 2-57 设置 “ 淘 变 又 加 ” 图 2-58 复制 并 缩小 


4 O 进入 “图 层 样式 ”对 话 框 , 修改 “内 47 选择 “渐变 释 加 ”选项 ， 选 中 “ 反 
阴影 ”参数 ， 如 图 2-59 所 示 。 癌 ” 复 选 框 ， 如 图 2-60 所 示 。 













































































































































温 合 选项 导读 | 渐变 
[| 混合 模式 (6): 正片 一 底 -Nl | 混合 模式 (0): 正常 = 回 仿 色 
一 透明 度 (0): = 29 o% | eo 
等 高 线 5 es 不 透明 度 (P): 一 

可 纹理 角度 Wy): 【 |】 -0 度 中 使 用 全 局 光 人 纹理 潭 友 En 

本 和 样式 (): 线性 
才学 A -i 
i 可 内 阴影 角度 WW): (| ) 5 度 
和 阻塞 (c): 全 0 -一 wy 
回 光泽 she 3 像素 门 光泽 编 让) 一 zs 一 100  % 
可 颜色 到 加 一 品质 中 颜色 到 加 设置 为 默认 值 | [ 复位 为 默认 什 
加 渐变 到 加 等 高 线 : [4 问 清 帝 据 上 (0) 
天 杂 色 (N): 5 0 % 回 外 发 光 
ee -一 - 口 投影 
器 投影 设置 为 默认 值 | [ 复位 为 默认 什 

图 2-59 修改 “内 阴影 ”参数 2-60 设置 “渐变 又 加 ”参数 


4 % 取消 选中 “外 发 光 ” 复 选 框 ， 


如 图 2-61 所 示 。 





样式 -一 新 变 到 加 
EE 
斜面 和 浮雕 
等 高 线 








混合 模式 (0): 正常 v 回 仿 色 
不 透明 度 (P): = % 
i 朗 : | [| 反 向 () 
样式 0: 线性 > 区 
角度 (N): (后 ) 90 度 
~ 
缩放 (5): oo 100 % 



















































































与 图 层 对 讲 (D) 


ae 
新 绍 样 式 (W).… 


站 预 鹤 (V) 


























[设置 为 默认 值 | [ 复位 为 默认 值 | 



































2-61 取消 选中 “外 发 光 ” 复 选 框 


S Wl 复制 最 上 面 的 一 层 ， 将 其 拖 出 


组 2， 如 图 2-63 所 示 。 


忆 由 和 加 1 拷 风 4 CC 到 


精辟 1 拷 风 4 


地 效果 
笠 面 笃 肯 
图 2-63 复制 图 层 





乒 图 





4 选择 背景 和 组 1 以 外 的 所 有 图 
层 ， 单 击 鼠 标 右 键 ， 执 行 “ 从 图 
命令 建立 组 2， 如 图 2-62 所 示 。 


层 建立 组 ” 








Dp 








2-62 建立 组 2 


按 Ctrl+T 组 合 键 将 其 凰 小 为 


185X185 px， 如 图 2-64 所 示 。 


图 2-64 缩小 图 形 








SD) 在 图 层 缩 览 图 上 双击 鼠标 ， 修 改 颜色 为 和 白色。 然后 单 击 鼠 标 右键 ， 执 行 “ 清 除 
图 层 样 式 ” 命 令 。 
S 3 双击 进入 “图 层 样 式 ” 对 话 框 ， 设 置 “ 僚 面 和 浮雕 ”参数 ， 然 后 单 击 等 高 线 ， 
在 打开 的 对 话 框 中 修改 曲线 ， 如 图 2-65 所 示 。 
笠 面 和 浮雕 rp 
结构 _ 
样式 (0: 内 钊 面 ~ 预 设 (P): 自 定 
方法 (Q): 平滑 ” 映射 


深度 D): 2 193 上 Ta 
方 回 : @ 图 下 
的 上 下 存储 (S)..… 





大 小 人 “= 77 


软化 Fi CT 0 


阴影 
角度 NN): -二 、90 度 
‘wg /号 使 用 全 局 光 (G) 








高 度 30 度 
|| 4 消除 锯齿 (0) 
高 光 模 式 (H): 滤 色 要 
不 透明 度 (O): Dw” 86 % 


阴影 模式 (A): 正片 到 底 ~ 加 到 
不 透明 度 (C): Ze 49 9 


设置 为 默认 值 夏 位 为 默认 值 
图 2-65 设置 “斜面 和 浮雕 ”参数 


S 选择 “等 高 线 ” 选 项 ， 设 置 范 围 为 80%， 然 后 单 击 等 高 线 ， 在 打开 的 对 话 框 中 
调整 曲线 ， 如 图 2-66 所 示 。 




















预 设 (P): 自 定 
一 映射 














图 2-66 调整 “等 高 线 ” 中 的 曲线 


信人 设置 “内 阴影 ”参数 ， 闫 色 为 SO 设置 “内 发 光 ” 参 数 ， 凑 色 
#1f7ab9， 如 图 2-67 所 示 。 为 #le7ec9， 如 图 2-68 所 示 。 











癌 纹理 
口 描 边 

回 内 发 光 
中 颜色 晋 加 
口 渐变 严 加 
口 图 案 释 加 
回 外 发 光 
回 投影 


























内 阴影 

结构 

混合 模式 6): 正常 ~ 加 加 

不 透明 度 (D): 一 = 一 一 61 % 
角度 (A): | ， )-50 。” 度 问 使 有 全 局 光 (G) 
距 高 DT 8 像素 
阳 塞 CC) 四 4 % 
大 小 (S): 26| 像素 

品质 
等 高 线 : | 4 消除 据 频 (D 
杂 色 (N): G 0 % 


设置 为 默认 值 夏 位 为 默认 值 












































样式 a 
温 语 选项 ; 黑 计 
园 笠 面 和 浮雕 混合 模式 (6): 正常 

回 等 高 线 不 透明 度 (0): 一 047 % 

口 纹理 杂 N: /二 2 % 
站 措 边 5 图 
可 内 阴影 
内 发 光 
s 光泽 方法 (Q): 柔和 下 

颜色 到 加 源 :器 居中 人 E) 。 回 边缘 (G) 

新 变 亚 加 阻塞 O: 一 0 人 % 
口 图 案 释 加 大 小 (5S): 36 像素 
回 外 发 光 品质 

投影 

等 高 线 [M5 消除 饥 上 中 
范围 人 R): 太 [1 lee 
拉动 0): 6 i 

















nl 


样式 


| 混合 选项 潜 认 
司 斜 面 和 浮 基 
回 等 高 线 

口 纹理 
口 描 边 


| 内 阴 











] 


图 2-67 设置 “内 阴影 ”参数 


设置 “光泽 ”参数 ， 凑 色 为 
#cbf8f7， 如 图 2-69 所 示 。 
结构 


温 语 模式 (6): 县 加 | 
不 透明 度 (D): 


角度 (N): (1) 区 一度 


距离 介 ): 像素 
大 小 (S): 像素 


言 引 ; 四 i 
op Fr 辣 反 相信 


设置 为 默认 值 复位 为 默认 值 


全 50 % 


[全 8 


+ 
影 














颜色 晋 加 
口 渐变 晋 加 
口 图 案 伙 加 
口外 点 光 
投影 





图 2-69 设置 “光泽 ”参数 


在 打开 的 对 话 框 中 修改 第 
色 标 的 颜色 为 #222006， 如 图 


ji 从 


fas 








载 入 (L)..… 
存 侍 (5).… 







































名 称 (N): “ 自 定 新 建 (W) 
三 渐变 类 型 (T): 实 底 ~ 
平滑 度 (M): 100|，|% 
IE 
会 DD 
色 标 
从 委 明 度 ， » |% 位 置 ; 咱 除 [D) 
颜色 : 国 fos(0:0d % 归 除 (D) 





图 2-71 修改 色 标 的 颜色 


设置 为 默认 值 复位 为 默认 值 








中 | 


图 2-68 设置 “内 发 光 ” 参 数 


设置 “渐变 登 加 ”参数 ， 单 击 渐 
变色 ， 如 图 2-70 所 示 。 








样式 





混合 选项 棱 认 





闷 笠 面 和 浮雕 
加 等 高 线 
品 纹理 

口 描 边 

回 内 阴影 

回 光泽 

丫 颜色 到 加 





口 图 案 秋 加 
回 外 点 光 


加 投影 








新 变 肥 加 
新 变 
混合 模式 (0): 滤 色 ~ 同 仿 色 
不 透明 度 (p): zy 100 % 
渐变 ; ES >| 回 反 向 (R) 
样式 (0): 径 向 ~ 辐 与 图 层 对 齐 四 玫 
角度 NW: (| ) 8 度 设 
缩放 (5): Ds % 1 











设置 为 默认 值 和 收 位 为 默认 值 





图 2-70 设置 “渐变 琶 加 ”参数 
































人 () 设置 “外 发 区” 参数 ， 颜 色 为 
#424242， 如 图 2-72 所 示 。 
样式 小 到 天 | 
结构 
混合 选 殴 时 认 | 
| 混合 模式 (E): 柔 光 ~ 
二 不 透明 度 (D): 一 Ce 20 ” % | 
一 杂 色 N: C= 一 0  % 
局 描 边 6 国 呈 
= 内 阴影 图 素 
"| 
有 mao 条 
国 扩展 Pj: Ce 一 0 % 
口 颜色 到 加 
= i i 大 小 (8): 像素 
器 图 案 要 加 一 品质 
ee 
等 高 线 : 同 消除 据点 () 
Ee PE 
范围 (R): Z5 % 
拉动 0): 4 0  % 
[设置 为 默认 值 | [ 复位 为 默认 什 











图 2-72 设置 “外 发 光 ” 参 数 





Photoshop 创意 况 P 玩 素 设 计 从 入 门 到 精通 





O | a 2s O 在 打开 的 对 话 框 中 设置 曲 
#00335c， 然 后 单 击 等 高 线 ， 如 图 2 2 1 寺 






















































































2 TO /as 
到 投影 预 设 (P): 自 定 
Ez ] 本 
| 混合 模式 (6) 正片 到底 ~” 国 国 
本 玉 者 二 不 透明 度 (0): 一 zy 一 一 64 % 
纹理 角度 (A): ( 上 ) 5 度 回 使 用 全 局 光 (9) 
-一 中 高 D): 一 0 一 一 39” 像素 
A 扩展 R): C= 一 0 % 
和 光泽 大 小 (3): 一 32 ”像素 
器 颜色 到 加 
习 渐变 到 加 
图 案 肥 加 
可 外 发 光 
回 图 层 控 空投 影 (U) ”六 
| 设置 为 默认 值 ] ( 复位 为 默认 值 % 




















图 2-73 设置 “投影 ”参数 图 2-74 设置 曲线 


O 单 击 “ 确 定 ” 按 钮 ， 此 时 的 图 像 效 64 绘制 正 圆 ， 并 复制 两 个 ， 然 
果 如 图 |2-75 所 示 。 后 调整 圆 的 位 置 ， 将 其 中 一 
个 进行 压缩 , 并 设置 为 “ 减 去 顶层 形状 ”， 

如 图 2-76 所 示 。 





图 2-75 图 像 效 果 2-76 绘制 图 形 











读 并 国 中 视图 (J 。 音 口 (W) 帮助 (H) 


| 上 次 污 汇 操作 (H) Ctrl+F EE 
| ‘EF( rl+ 对 齐 边 综 | 品 妆 


转 撞 为 智能 小指 (S) 

沪 漠 库 (G).… 

自 适应 广角 (A).… Alt+Shift+Ctr|+A 
Camera Raw 和 访 往 (CO)... Shift+Ctr|+A 
第 头 校 正 (R)... Shift+Ctrl+R 
液化 ( 口 .… Shift+Ctrl+X 
油画 (O)... 

| “消失 点 (V).. At+Ctrl+V 























O 选择 圆 所 浊音 选 硕 _ 

在 的 图 层 ， 注 二 调 整 .. 
单 击 鼠 标 右 键 ， 执 行 
“ 栅 格 化 图 层 ”命令 ， 
如 图 2-77 所 示 。 


人 
镜 ”|“ 模 


糊 ”| “高 斯 模糊 ” 
命令 ,如 图 2-78 所 示 。 








风格 化 
担 曲 一 
锐 化 
视频 
像素 化 
泻 染 























局 用 图 层 莹 版 
停 用 等 量 莹 版 
图 2-77 执行 “ 栅 格 化 图 层 ” 命 令 2-78 执行 “高 斯 模糊 ”命令 





O 在 弹出 的 对 话 框 中 设置 半径 为 O 单 击 “ 确 定 ” 按 钮 后 图 像 如 图 
J on 2-80 所 示 。 


了 ALP) 





半径 {R): 1.5 





图 2-79 设置 半径 图 2-80 图 像 效 果 


02 ， 修改 图 层 的 不 透明 度 参 数 为 7() 此 时 的 效果 如 图 2-82 所 示 。 
30%， 如 图 2-81 所 示 。 





正常 :| 不 透明 度 : TE ] 
t: EE a i + 


-De 


[Es 
刁 且 栅 圆 1 拷 风 4 让 


多 向 组 2 
多 向 组 1 


- 面 * ” 


图 2-81 修改 不 透明 度 图 2-82 图 像 效 果 


中 | 新 建 图 层 ， 用 硬度 为 0% 的 画笔 Wm 按 Ctrl+T 组 合 键 将 其 略微 压 扁 ， 
绘制 一 个 点 ， 如 图 2-83 所 示 。 放 在 前 面 绘制 的 高 光 上 ， 并 调 
整 不 透明 度 为 70%， 如 图 2-84 所 示 。 








图 2-83 绘制 点 图 2-84 压 局 并 调整 位 置 与 不 透明 度 








Photoshop 创意 





全 p 志 未 设计 从 入 门 到 精通 





















3 像素 3 称 素 3 像素 3 像素 


回 3 像素 | 3 焦 素 | 加 














[OD 








Mm 


2-85 设置 圆 角 矩形 参数 


添加 图 层 样 式 ， 设 置 “ 内 阴影 ” 


参数 ， 如 图 2-87 所 示 。 





用 “ 圆 角 窍 形 工具 ”绘制 一 个 图 角 秆 形 ， 


在 “属性 ”面板 中 设置 
8Dx、 圆 角 闭 径 为 3 pz， 如 图 2-85 所 示 。 


站 


按 Ctrl+T 组 合 键 旋 转 45 度 ， 并 复制 一 层 ， 
按 Ctrl+T 组合 键 后 单 击 鼠 标 右 键 ， 执 行 


“水 平 翻转 ”命令 


YY， 


效果 如 图 2-86 所 示 。 
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图 2-86 复制 并 翻转 
Wa 0 
色 的 色 标 分 别 为 #la66b3 和 








样式 
| 温 合 选项 渐 认 
口 斜面 和 浮上 
口 等 高 线 












































内 阴影 


一 品质 














设置 为 默认 值 复位 为 默认 值 


结构 
混合 模式 (6): 颜色 加 深 | 
不 透明 度 (O): 40 % 
角度 (a): (| 5 50 度 器 使 用 全 局 光 (G) 
距 高 D): Ce 2 像素 
阻塞 (0): (二 0 % 
大 小 全 :ee | 5 像素 
| 4 回 消除 锯齿 () 
未 色 (NI Ce 0  % 






















































































#2db7db， 如 图 2-88 所 示 。 
全 3 a 
混合 迁 珊 时 认 可 要 
| 混合 模式 (0): 正常 ”| 回信 色 
本 不 透明度 P): 一 10  % 
站 纹理 浙 闪 :| [7 反问 () 
RE 样式 (): 径 向 ~ 团 与 图 层 对 齐 () 
可 内 阴影 角度 N:( | |50 度 
内 发 光 sé 
缩放 人 := 150  % 
了 颜色 到 加 设置 为 默认 值 | | 复位 为 默认 值 
图 案 秋 加 
可 外 发 光 
投影 











MI 


尾 式 
混合 选项 甘 计 
| 口 射 面 和 浮雕 











口 颜 色 琶 加 








| 呈 外 碌 光 


图 2-87 设置 “内 阴影 ”参数 


设置 “外 发 光 ” 参 数 ， 如 图 2-89 























所 示 。 
了 结构 
混合 模式 {E): 滤 色 ” 
不 透明 度 (0): > 75 % 
隶 色 人 :Ce 0 % 
加 | | 加 | | 
一 醒 弯 - 
方法 (Q): 柔和 
扩展 PP): C= 0 % 
大 小 (S): 5 像素 
品质 一 一 一 一 
等 高 续 : ~ 消除 锯 具 人 ) 
范围 R): 一 ”50 % 
拌 动 Q〗)): CS 0 % 








设置 为 默认 值 复位 为 默认 值 








图 2-89 设置 “外 发 光 ” 参 数 
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图 2-88 设置 “渐变 于 加 ”参数 


单 击 “ 确 定 ” 按 钮 完成 效果 ， 如 
图 2-90 所 示 。 





图 2-90 完成 效果 


| 





7722 写实 拟 物 图 标 设计 

与 实 图 标 也 叫 拟 物 图 标 ， 使 用 了 生活 中 大 量 可 见 的 元 素来 表达 功能 对 应 的 含义 。 

在 使 用 写实 风格 创作 图 标的 过 程 中 ， 最 为 重要 的 就 是 元 素 的 设计 要 符合 真实 生活 中 的 
情况 ， 包 括 外 形 、 材 料 、 角 度 、 大 小 比例 、 色 彩 等 因素 ， 如 图 2-91 所 示 。 


下 





一 一 一 一 -一 





图 2-91 符合 真实 生活 效果 
需要 设计 者 注意 的 是 ， 与 实 并 不 是 男 得 像 照 片 一 样 ， 为 了 让 图 标 更 具 特 色 ， 设 计 者 
让 创造 的 图 标 比 较 逼 真 ， 但 又 超越 现实 ， 例 如 方形 的 玉米 、 水 品质 感 的 云彩 等 ， 如 图 
2-92 所 示 。 


(FUTA 





图 2-92 写实 拟 物 图 标 


写实 图 标的 制作 流程 如 下 。 


加 ”尽量 找到 具有 参考 价值 的 照片 和 图 片 。 
”归纳 出 造型 重点 ， 提 炼 颜色 、 纹 理 细节 。 


”有 重点 性 的 夸张 造型 和 构图 表现 。 





更 哆 2U Photoshop 创意 合 p 质 索 设 计 从 入 门 到 精通 








绘制 概念 草稿 ， 从 不 同 的 角度 以 不 同 的 组 合 方式 出 发 。 
义 出 轮廓 线 ， 填 充 基 本 颜色 。 


绘制 暗部 阴影 、 高 光 ， 添 加 纹理 ， 处 理 细 节 ， 添 加 环境 色 。 
添加 背景 9 进行 发 布 O 


\C ER 线性 图 标 设计 


线性 图 标 一 般 是 以 纯 描 线 方式 画 出 来 ， 它 比拟 物化 图 标 简 单 很 多 ， 但 却 很 实用 ， 特 别 
适用 于 局 平 化 设计 。 线 性 图 标 可 以 方便 地 转换 成 SVG ( 可 缩放 矢量 图 形 ) 、 图 标 字 体 ， 体 
积 小 ， 支 持 目 由 缩放 且 不 模糊 ， 非 前 适 合 在 手机 APP 上 使 用 。 





© 尺寸 规格 : 一 般 线条 为 2 px， 如 图 2-93 所 示 ， 也 有 的 加 强 为 3 px， 如 图 
2-94 所 示 。 


QO 


钱 生 我 


2-93 2 px 线性 图 标 


2-94 3 px 线性 图 标 


@@ 风格 : 线条 简单 ， 图 形 指示 意义 明确 。 





提示 : 在 采用 图 层 样 式 做 描 边 
效果 时 ， 如 果 用 到 较 大 的 数值 ， 
描 边 会 产生 分 块 曲线 ， 边 缘 有 锯 郊 感 ， 
而 通过 矢量 描 边 处 理 可 得 到 完美 的 结 
果 ， 如 图 2 一 95 所 示 。 





80 px 样式 描 边 80 px 路 径 摘 边 





2-95 样式 描 边 与 路 径 描 边 


国 设计 思路 

在 制作 图 标 前 需要 分 析 图 标的 作用 是 什么 ? 放 在 哪里 ? 什么 风格 ? 在 对 这 些 需 求 进行 
分 析 后 找到 具体 的 图 形 来 表达 抽象 或 具体 的 意义 ， 最 后 进行 图 形 设 计 ， 在 绘制 草图 后 使 用 
Photoshop 完成 图 标的 设计 ， 如 图 2-96 所 示 。 








国 制作 步骤 
线性 图 标 可 以 通过 描 
流程 如 图 2-97 所 示 。 








名 称 (N): 未 标题 -1 
预 设 (P): 自 定 


太 小 (人 
宽度 (W): 
高 度 (H): 
分 辩 率 (R): 像素 /英寸 
颜色 模式 (M): RGB 颜色 
背景 内 容 (C): 白色 


| 8 位 


颜色 醒 置 文件 (D): sRGB IEC61966-2.1 
像素 长 宽 比 (X):， 方 形 像素 





边 直接 绘制 ， 








2-98 新 建 空白 文档 


在 画面 中 单 击 鼠 标 弹 出 对 话 框 ， 设 置 


03 


图 2-100 所 示 。 


() A pp Ctrl+C 组 合 刍 复制， 
将 其 因 小 2 px， 如 图 2-101 所 示 。 




















| 50 公示 。 间 = 
是 丰 中 心 





图 2-100 设置 参数 


© © 


2-96 设计 思路 


这 里 介绍 如 何 使 用 布尔 i 


CROP WI 


图 2-97 制作 流程 


存 傅 预 设 (5)..… 


师 除 预 设 (D)..… 





Ee 
网 | 


02 





Di 


度 和 高 度 


填充 背景 色 为 绿色 ， 然 后 选择 。 朋 


运算 来 制作 线性 图 标 ， 制 作 


在 Photoshop 中 新 建 一 个 空 
日 文档 ， 如 图 2-98 所 示 。 


“椭圆 工具 ” 如 图 2-99 所 示 。 


| 矩形 工具 





图 2-99 选择 “椭圆 工具 ” 


参数 ， 单 击 “ 确 定 ” 按 钮 ， 如 


按 Ctrl+V 组 合 键 粘 贴 ， 炸 贴 后 按 Ctrl+T 组 合 





图 2-101 复制 并 缩小 








Photoshop 创意 合 p 希 素 设计 从 入 门 到 精通 


() 在 选项 栏 中 单 击 “ 路 径 操作 ” 按 OO 


钮 ， 在 下 拉 列 表 中 选择 “ 减 去 顶 
层 形状 ”选项 ， 如 图 2-102 所 示 。 



































| 国 新 建 图 三 


- 减 去 









































图 2-102 选择 “ 减 去 顶层 形状 ”选项 


Qo Ow 


2-105 所 示 。 


-> 


国 图 角 巡 HE 工 呈 
情 图 工具 


人 学 壹 形 工 县 
.” 直 持 工 县 
虚 F 自 定 形状 工 县 


== 有 == ,一 








图 2-104 选择 “ 算 形 工具 ” 


() 单 击 “ 确 定 ” 控 钮 后 在 选项 柱 | () 


中 选择 “合并 形状 ”选项 ， 如 
图 2-106 所 示 。 


贺 已 入 | Vb 
国 ”日 新建 图 层 | 





















































图 2-106 选择 “合并 形状 ”选项 





| ] 册 次 绘制 枯 圆 ， 顶 圆 的 宽度 和 高 度 为 
58 px， 如 图 2-108 所 示 。 

| 7 复制 该 椭圆 ， 缩 小 2 px 后 进行 “ 减 去 
顶层 形状 ”的 操作 ， 并 移动 右边 缘 到 

第 一 个 圆 的 中 心 处 ， 如 图 2-109 所 示 。 


执行 操作 后 图 形 效 果 如 图 2-103 
所 示 。 





图 2-103 图 形 效果 


在 男 面 中 单 击 鼠标 ， 在 弹出 的 对 
话 框 中 设置 宽 、 高 参数 ， 如 图 


上 中 心 





图 2-105 设置 宽 、 高 参数 


将 矩形 移 至 圆 的 中 心 ， 如 图 
Dn a 





图 2-107 移 至 中 心 
© 


提示 : 按 Citn+T 组 合 键 调 出 

自由 变换 框 ， 找 到 圆 的 中 心 点 ， 
按 Ctrl+R 组 合 键 打开 标尺 ， 从 标尺 中 
拖 出 参考 线 来 标记 中 心 点 的 位 置 。 








创建 湛 回 
宽度 : 58 像素 高 度 : 58 将 素 


] 3 


1] > 


所 未 。 


1 


拉 列 表 中 选择 “合并 形状 组 件 ” 
选项 ， 如 图 2-114 所 示 。 


] 


2 15 所 示人 





电 中 心 





取消 
2-109 复制 并 移动 


按键 盘 上 的 方向 键 ， 将 圆 同 左 移 | 复制 图 层 ， 辐 右 移动 复制 的 圆 ， 
动 7px， 如 图 2-110 所 示 。 使 左边 缘 对 齐 中 心 ， 然 后 同 右 移 
动 7px， 使 两 边 对 称 ， 如 图 2-111 所 示 。 


2-110 向 左 移动 2-111 复制 并 移动 


册 次 复制 图 层 ， 将 圆 的 下 边缘 移 ] 0O 按 方 回 键 问 下 移动 7px， 如 图 
至 参考 线 的 中 心 点 ， 如 图 2-112 2 Ws 








2-112 复制 并 调整 位 置 2-113 向 下 移动 


在 选项 栏 中 单 击 “ 路 | 辆 | 尼 
径 操作 ”按钮 ， 在 下 建国 导 














w 加] 减 去 顶层 形状 
目 | 与 形状 区 域 相 充 
只 排除 重 到 形状 


[a 


Adobe Photoshop CC 


0 此 操作 会 将 实时 形状 转变 为 常规 路 径 。 是 否 继续 ? 






在 弹出 的 对 话 框 中 单 
击 “ 古 ”按钮 ， 如 图 






是 (Y] | 否 (N) | 


不 再 显示 











2-114 选择 “合并 形状 组 件 ” 选 项 2-115 单 击 “ 是 ”按钮 





如 图 2-116 所 示 。 
2)() 再 次 单 击 “路 径 操 作 ” 按 钮 ， 在 下 拉 列 表 中 选择 “合并 形状 组 件 ” 选 项 ， 如 图 
Ze Ua 









































[EB 网 光 


Ee 























Sra, 


图 2-116 执行 “合并 形状 ”命令 2-117 选择 “合并 形状 组 件 ” 选 项 


几 在 “图 层 ” 面 板 中 选择 “椭圆 1” ) 使 用 “路 径 选 择 工具 ”选择 外 圆 ， 

图 层 ， 如 图 2-118 所 示 。 按 Ctrl+C 组 合 键 复制 。 然 后 选择 
“椭圆 2” 所 在 的 图 层 , 按 Ctrl+V 组 合 键 粘贴 ， 
如 图 2-119 所 示 。 























图 2-118 选择 “椭圆 1” 图 层 图 2-119 复制 并 粘贴 
WW 在 选项 栏 中 选择 “与 形状 区 ?4 执行 操作 后 图 像 效果 如 图 2-121 
域 相交 ”选项 ， 如 图 2-120 所 示 。 











a QI 
| 3 a 站 

















图 2-120 选择 “与 形状 区 域 相 交 ” 选 项 图 2-121 图 像 效果 








\ op TI NUD ?9 、 © 
咏 选择 “合并 形状 组 件 ” 选 项 提示 。 在 进行 旋转 时 ， 按 住 Shift 键 可 


完成 篮球 图 标的 绘制 ， 如 图 以 精准 控制 旋转 角度 为 15 度 的 信和 数 ， 

即 15 度 、30 度 、45 度 、60 度 等 。 线 性 图 标 

2 -122 所 不 。 等 比例 缩放 会 导致 线条 粗细 改变 ， 会 破坏 页 面 

26 为 了 使 其 具有 动感 ， 选 择 图 的 视觉 统一 性 ， 因 此 对 同一 图 标的 多 种 尺寸 均 
Com le ee 


RERDIWIORE 


We re BO ,An 2 2 3 二 





2-122 完成 绘制 图 2-123 旋转 效果 

二 

- 设 
(0224 mrrecrrrrmrrrrrrrrrmrrror ll 四 





Ul 最 重要 的 组 件 之 一 就 是 图 标 ， 随 着 局 平 化 设计 的 发 展 越 来 越 注 重 图 标的 简洁 上 
意 表 达 ， 局 平 化 图 标 是 设计 界 的 流行 趋势 ， 它 流行 的 原因 在 于 以 下 几 点 


分 辩 率 越 快 越 融 。 

量 写实 拟 物 图 标 ， 造 成 观 者 视觉 上 的 疲劳 。 

量 纹理 、 阴 影 等 细节 对 图 标的 基本 功能 形成 了 干扰 。 
实 的 图 标 很 难 表现 一 个 抽象 的 概念 。 


忆 
忆 
@ 


屏幕 
大 
大 
写 





国 扁平 化 的 误区 

(TT te me rh 
i 变 得 零碎 ;可 操作 的 按钮 等 和 背景 没有 区 分 开 来 ; 图 

过 于 抽象 化 ， 难 以 识别 。 

‘@ 扁平 化 图 标 分 类 

扁平 化 图 标 有 以 下 几 类 。 


《四 为 剪影 图 标 添加 一 个 圆 或 矩形 的 纯色 背景 作为 底 ， 如 图 2-124 所 示 。 
《四 背景 采用 同色 系 的 拼 贴图 标 ， 如 图 2-125 所 示 。 





Photoshop 创意 志 P 玩 素 设 计 从 入 门 到 精通 


ooe 
oooe 
OO@6 


图 2-124 纯色 背景 为 底 图 2-125 拼 贴 背景 
@ 折纸 风格 的 图 标 分 为 两 个 部 分 ， 使 用 不 同 深浅 的 两 种 颜色 实现 折纸 的 效果 ， 如 
图 2 一 126 所 示 。 











图 2-126 折纸 风格 
”长 投影 的 图 标 如 图 2-127 lak 


a 
加 民国 目 国 熙 
回国 上 国 辐 


图 2-127 长 投影 图 标 





图 剪影 图 标的 设计 要 点 
拟 物化 设计 是 尽 可 能 地 绘制 繁琐 细节 ， 追 求 丰 富 和 相似 度 ， 而 甬 影 图 标 相 反 ， 要 求 去 
繁 择 简 ， 并 在 设计 中 有 所 变化 。 简 影 图 标的 设计 流程 如 下 。 
@ 提炼 精华 ,勾勒 轮廓 : 通常 在 绘制 已 有 参照 物 的 基础 上 设计 一 个 图 标 ， 可 以 根 
据 自 己 喜 欢 的 a a 分 析 ， 先 抓 取 参 照 物 的 关键 节点 ， 并 使 用 几何 图 
形 绘制 出 一 0 如 图 2-128 所 示 。 
周 整 造型 : 基础 图 形 出 来 后 就 开始 根据 自己 的 想法 调整 造型 ， 这 个 


阶段 可 以 多 ， ep 通过 对 比 挑选 出 最 合适 的 造型 图 , 如 图 2-129 所 示 。 





图 2-128 勾勒 轮廓 图 2-129 调整 造型 


首 减 ， 完 成 塑 型 ， 对 细节 部 分 进行 增加 或 删 减 ， 形 成 特色 ， 完 成 最 终 的 


O©” 


田 节 其 
剪影 图 标 ， 如 图 2-130 所 示 。 


的 


图 2-130 细节 增 减 


© 
提示 类似 的 图 标 还 有 很 
多 ， 我 们 也 可 以 拿 来 参考 ， 
如 图 2 一 131 所 示 。 


READ MORE 
2-131 参考 图 标 





国 4 种 扁平 化 风格 图 标的 绘 抽 
下 面 对 4 种 扁平 化 风格 图 标的 绘制 进行 讲解 ， 分 别 是 常规 扁平 化 、 长 投影 、 投 影 、 渐 
变 式 图 标 ， 如 图 2-132 所 示 。 





图 2-132 4 种 扁平 化 风格 图 标 


@ 常规 扁平 化 图 标 
音 规 局 平 化 图 标 是 没有 任何 修饰 的 局 平 化 图 标 ， 绘 制 去 
为 流程 图 。 


过 程 十 分 简单 ， 图 2-133 所 示 
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国 esc) 


2-133 流程 图 
二 O01 执行 “文件 ”| “新建 ”命令 ， 新 建 空白 
,CE 下 文档 ， 如 图 2-134 所 示 。 
AS 7 选择 “ 圆 角 和 矩形 工具 ”， 在 选项 栏 中 设 
am 0 置 填充 颜色 ， 设 置 圆 角 半 径 为 40 px， 如 
pmo i 图 2-135 所 示 。 


背景 内 容 (C): 白色 











和) 高 级 



































ECE FE EE] 











颜色 配置 文件 (D): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 方形 像素 











图 2-134 新 建 空 月 文档 图 2-135 设置 选项 栏 

() 单 击 半径 左 侧 的 按钮 ， 在 展开 的 (4 在 画面 中 绘制 加 角 和 矩形 ， 如 图 
选项 中 选择 “国定 大 小 ” 单 选 按钮 ， 号 号 中央 

设置 宽 、 高 为 256 px， 如 图 2-136 所 示 。 








不 受 约 束 
DE 

D Beh ww | + 
[比例 WW: H: 

[| 具 中 心 








2-136 设置 固定 大 小 2-137 绘制 圆 角 矩形 


选择 “椭圆 工具 ”， 设 置 固定 大 在 画面 中 绘制 正 圆 ， 如 图 2-139 
O05 小 为 186 px， 如 图 2-138 所 示 。 (QO 所 示 。 


口 二 率 

中 圆 (给 制 直径 或 半径 ) 

中 国 E 大 小 W: H: 
[上 比 间 | WW: H: 

中 中 心 





图 2-138 设置 固定 大 小 图 2-139 绘制 正 圆 








0 7 选择 两 个 图 层 , 选择 “移动 工具 ”后 在 选项 栏 中 单 击 “ 牌 直 居 中 对 齐 ” 按 钮 和 “水 
平 居 中 对 齐 ” 按 钮 ， 如 图 2-140 所 示 。 
使 用 “路 径 选 择 工具 ”选择 圆 ， 按 Ctrl+C 组 合 键 复制 ， 按 Ctrl+V 组 合 键 粘 
O08 贴 。 然 后 按 Ctrl+T 组 合 键 进行 自由 变换 ， 按 住 Shift+Alt 组 合 键 按 比 例 见 小 
40 px， 如 图 2-141 所 示 。 
Ps 文件 (F) 编 徊 {图像 四 ”图 层 (L) 类 型 人 ) 选择 (9 访 第 由 ”视图 (V) 





2-140 单 击 对 齐 按钮 图 2-141 复制 并 缩小 
0 在 “属性 ”面板 中 进行 细致 调整 ， ] 在 选项 栏 中 选择 “ 减 去 顶层 形 
调整 后 的 参数 为 146 px， 如 图 Re 2 A 
Del 




















2-142 调整 参数 图 2-143 选择 “ 减 去 顶层 形状 ”选项 


| | 执行 操作 后 的 图 形 如 图 2-144 ] pl 工具 箱 中 选择 “ 目 定 形状 工 
所 示 。 有 具 ”， 如 图 2-145 所 示 。 


国 矩形 工具 
国 贺 角 拒 形 工具 
。 椭圆 工具 
全 多 边 形 工具 
/直线 工具 
et SRI 





图 2-144 操作 后 的 图 形 图 2-145 选择 “ 自 定形 状 工具 ” 
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] 在 选项 栏 中 单 击 如 图 2-146 所 | 展开 列表 ， 单 击 如 图 2-147 所 
示 的 三 角 按 钮 。 示 的 图 标 。 


二 | 桨 天 :| 生日 芒 对 入 这 有 


PPeeDT Es 
hh 汪 WW9 AS 区 
| 








至 本 和 医 


局 x © 
(R) TM 





图 2-147 单 击 图 标 


| 选择 “全 部 ”选项 ， 如 图 2-148 
所 示 。 
| 在 弹出 的 对 话 框 中 单 击 “ 确 定 ” 
按钮 ， 如 图 2-149 所 示 。 





上 photoshop 
全 是 天 用 形状 中 的 形状 薪 换 当前 的 形状 ? 





| 确定 IN [| 取消 追加 (A) 


2-148 选择 “全 部 ”选项 图 2-149 单 击 “ 确 定 ”按钮 








[区 全 c9 二 区 全 | 日 尼 二 | 大 和 :| 全 目 忆 zi | 中 在 载 入 的 形状 中 选择 “标志 
= AaaRd/ MR 一 > -中 一 | 9》 山 一 
i ea RS 3”， 如 图 2-150 所 示 。 
= al LIL ss le | Shift 键 绘制 
(CHC OOO J DN SE 

+ 让 必 第 NN 详 米 向 | FREE 下 三 角形 ， 如 图 2-151 所 示 。 


中 业 站 十 闪 习 雪 各 米 焰 米 WVWwy() 
个 一 一 隐 贡 芝 叶 计 和 NN、 ” 富 六 人 杯 攻 
之 业 宙 于 世人 一 上 图 图 
宁国 必要 洒 沁 CI 一 汪 兴 全 
全 光村 全 天 





rae Ros) 

2 ONN 

a: 

a HOO0HTH%ET OOH DOART 
上 mm GT | iT 站 





2-150 选择 “标志 3” 2-151 绘制 三 角形 








| 按 Ctrl+T 组 合 键 将 其 旋转 -90 2) 按 Ctrl+; 组 合 键 隐 藏 参考 线 ， 
度 ， 然 后 从 标尺 中 拖 出 参考 线 ， 完成 效果 如 图 2-153 所 示 。 

标记 圆 的 中 心 ， 调 整 三 角形 的 位 置 ， 如 图 

2-152 所 示 。 








图 2-152 旋转 并 调整 位 置 图 2-153 完成 效果 


(x 
提示 : 选择 圆 后 按 Ctri+T 
组 合 键 即 可 看 到 中 心 点 ， 
然后 抑 出 参考 线 ， 如 图 2 一 154 
所 示 。 














图 2-154 中 心 点 


长 投影 图 标 
下 面 介绍 长 投影 图 标的 绘制 ， 图 2-155 所 示 为 流程 图 。 





图 2-155 流程 图 
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0 ] 使 用 “和 矩形 工具 ”绘制 一 个 填充 () 在 “图 层 ” 面 板 中 调整 矩形 到 
闫 色 为 黑色 的 和 矩形， 如 图 2-156 


椭圆 的 下 方 ， 如 图 2-157 所 示 。 
所 示 。 








P 类 型 ?| 回 四 工 吕 男 
[下 。 。 <。| 禄 明度 :now%| -| 





矶 定 : 图 ww 中国 填充 : |100% | 


® | 辣 形 估 1 
= [Hm 





图 2-156 绘制 矩形 图 2-157 调整 图 层 顺 序 


©@ 、 、 eS 。 7 a 


接 上 下 拖 动 即 可 调整 45 度 ， 如 图 2-158 所 示 。 
层 ) 66 本 Ar 访 MY 二 旦 99 人 3 
a 0 4 在 “图 层 ” 面 板 底部 单 击 “ 添 加 蒙 版 ”按钮 添加 图 
层 蒙 版 ， 如 图 2-159 所 示 。 





加 
= 一 


A 到 加 帮工 妆 通 目 
| 
饮 定 : 加 of 中 看。 十 癌 : 100%| | 


®t1 





图 2-158 旋转 45 度 2-159 添加 图 层 蒙 版 


U3 选择 “ 圆 角 矩形 1” 图 层 ， 按 住 Ctrl 键 单 击 该 图 层 的 缩 览 图 将 其 载 入 选区 ， 如 
图 2-160 所 示 。 
() O 按 Ctrl+Shift+I 组 合 键 进行 反问 选择 ， 如 图 2-161 所 示 。 








图 2-160 载 入 选区 图 2-161 反 向 选择 


(0 7/ 设置 背景 色 为 黑色 ,选择 “矩形 1” 图 层 蒙 版 , 按 Ctrl+Delete 组 合 键 填充 蒙 版 ， 
如 图 2-162 所 示 。 


山 网 | 四 如 透 道 | 路 径 | 至 
(UN Be pa | 加 OT 口 羡 








击 添加 错 点 如 图 | 一 一 time 
号 TOO 所 示 锁定 : 加 。 中 和 填充: 100% | - 
@ | 加 1 


© © | 瑟 4 加 1 


提示 * 用户 也 可 以 在 
选择 蒙 版 后 直接 使 用 
“画笔 工具 ”在 画面 中 涂抹 。 


图 2-162 填充 蒙 版 图 2-163 添加 锚 点 





按 住 Ctrl 键 拖 动 销 点 的 位 置 ， 


09 按 住 Alt 键 依次 单 击 矩形 顶端 的 10 
三 个 锚 点 ， 如 图 2-164 所 示 。 使 多 余 的 黑色 部 分 位 于 三 角形 下 
方 ， 如 图 2-165 所 示 。 








2-164 单 击 锚 点 2-165 拖 动 锁 点 位 置 


Eh 


] 器 调整 后 第 一 个 长 投影 效果 就 


| | 在 “图 层 ” 面 板 中 调整 图 
制作 完成 了 , 如 图 2-167 所 示 。 


层 的 不 透明 上 度 为 20%， 如 图 
2-166 所 示 。 
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图 2-166 修改 不 透明 度 图 2-167 长 投影 完成 效果 


| 下 面 是 圆 形 的 长 投影 制作 。 同 理 先 绘制 一 个 矩形 ， 旋 转角 度 ， 如 图 2-168 所 示 。 
添加 蒙 版 后 使 用 “钢笔 工具 ”添加 三 个 锚 点 ， 然 后 调整 锚 点 ， 如 图 2-169 所 示 。 
] 4 调整 图 层 的 不 透明 度 为 20%， 完 成 长 投影 图 标的 绘制 ， 如 图 2-170 所 示 。 

















图 2-168 绘制 矩形 并 旋转 图 2-169 添加 并 调整 锚 点 2-170 完成 绘制 
Go 投影 图 标 
介绍 投影 图 标的 绘制 ， 图 2-171 所 示 为 流程 图 。 


图 2-171 流程 图 


() 在 常规 局 平 化 图 标的 基础 上 选择 圆 角 和 窜 形 的 图 层 ， 单 击 “ 图 层 ” 面 板 底部 的 “ 添 
加 图 层 样式 ”按钮 ， 在 打开 的 菜单 中 选择 “投影 ”选项 ， 如 图 2-172 所 示 。 
() 全 打开 对 话 框 ， 设 置 “ 投 影 ” 参 数 ， 如 图 2-173 所 示 。 






























































投影 
合 选项 奈 认 
CE 混合 模式 (6): 正片 又 底 - 国 国 
斜面 和 浮雕 新 建 样式 (W) 
口 等 高 线 不 透明 度 (0): = 20  % 的 
a AN 引 预 览 (V 
口 纹理 负 度 WW: ( 、】120 。 度 加 使 用 全 局 光 人 
-一 中 高 D: 10 像素 
= 二 扩展 (R): C=» 0 % Sl 
内 发 光 


大 小 后): Ce | 0 像素 














颜色 到 加 品质 一 一 
渐变 到 加 等 高 线 : 消除 锯 频 中 

图 案 到 加 Ld 

EE 本 图 层 挖 空 投影 (U) 
[设置 为 默认 值 。] | 复位 为 默认 值 | 






















































































图 2-172 选择 “投影 ”选项 图 2-173 设置 “投影 ”参数 


() 单 击 “ 确 定 ” 按 钮 ， 图 像 效 果 (0)4 选择 该 图 层 ， 单 击 鼠 标 右 键 ， 
如 图 2-174 所 示 。 


执行 “拷贝 图 层 样式 ”命令 ， 
如 图 2-175 所 示 。 








拷贝 图 层 样式 
补贴 图 后 村 信 

清除 图 层 样式 

复制 形状 尾 性 

粘贴 形状 屋 性 

从 隔 高 图 层 释放 标 
向 下 合并 
合并 可 见 图 层 

拼合 图 瞻 











图 2-174 图 像 效 果 2-175 执行 “拷贝 图 层 样 式 ” 命 令 


O05 选择 加 和 三 角形 所 在 的 图 层 ， () 完成 制作 ， 效 泉 如 图 2-177 
单 击 鼠 标 右键 ， 执 行 “ 烙 贴 所 示 。 
图 层 样式 ”命令 ， 如 图 2-176 所 示 。 


拷贝 图 层 样式 








复制 形状 属性 
粘贴 形状 必 性 


从 隔 高 图 层 释放 
合并 形状 
合并 可 见 图 层 
拼合 图 借 

红色 











图 2-176 执行 “粘贴 图 层 样式 ”命令 图 2-177 完成 效果 
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渐变 式 图 标 
下 面 介绍 渐变 式 图 标的 绘制 ， 图 2-178 所 示 为 流程 图 。 












> > 





图 2-178 流程 图 


() 在 常规 局 平 化 图 标的 基础 上 复 () 选择 “钢笔 工具 ”， 在 圆 的 路 
制 贺 角 和 矩形 ， 并 在 “图 层 ” 面 径 左 、 右 两 侧 添加 两 个 销 点 ， 
板 上 设置 “填充 ”为 0%, 如 图 2-179 所 示 。 如 图 2-180 所 示 。 





2-179 设置 “填充 ”为 0% 图 2-180 添加 两 个 锚 点 
() 3 在 工具 箱 中 选择 “直接 选择 工 () 框 选 下 半 部 分 ， 如 图 2-182 
= A 所 示 。 


和 A 路 径 选 择 I 且 A 
。 瞩 直 接 选 择 I 具 A 


人 





图 2-181 选择 “直接 选择 工具 ” 图 2-182 框 选 下 半 部 分 








按 Delete 键 删除 选中 的 锁 








05 




















































































































a 样式 -一 渐变 县 加 
点 ， 如 图 2-183 所 示 。 | | 「 尖 
8 口 斜面 和 浮雕 
QO 双击 图 层 ， 在 打开 的 对 话 和 i 
框 中 添加 “渐变 匡 加 ”图 a Wt 0 
| 9 内 阴影 角度 N:( | ) 8 度 
层 样 式 ， 如 图 2-184 所 示 。 一 - 缩放 (5): 一 一 一 一 100 % 
Ee [设置 为 默认 值 | [ 复位 为 默认 值 
图 案 肥 加 
外 发 光 
投影 









































2-183 删除 锚 点 


单 击 “ 确 定 ” 按 钮 ， 
2-185 所 示 。 


() 效 末 如 图 (UN 


2-186 所 示 。 


图 2-184 添加 “渐变 亚 加 ”图 层 样式 


选择 后 层 的 圆 角 窃 形 ， 同 样 添 加 
“渐变 合 加 ”图 层 样式 ， 如 图 


取消 





新 建 样 式 (W).… 








V 








预 点 (V) 




















































































2-185 效果 


(9 单 击 “ 确 定 ” 按 钮 完成 效 末 ， 如 图 2-187 所 示 。 





图 2-187 完成 效果 


军 














[本 渐变 要 加 一 
| 重 革 运 贡 野人 | | | 下 一 
让 混合 模式 (0) 正片 释 底 
本 不 透明 度 P): 呈 一 一 
避 纹理 Ee 
站 指 边 样式 (): 线性 
内 阴影 角度 QW: | ) 50 度 
可 内 发 光 eh 
iE 缩放 (人 ): 一 一 。 100 
本 颜色 到 加 设置 为 默认 值 | | 复位 为 默认 值 
图 案 秋 加 
外 发 光 
柯 投影 


图 2-186 添加 “渐变 到 加 ”图 层 样 式 


与 图 层 对 草包 


% 














更 筠 gU| Photoshop 创意 全 p 所 未 设计 从 入 门 到 精通 





不 同 质感 与 纹理 的 





2 .3 图 标 设计 的 多 元 化 、 个 性 化 发 展 方向 促使 了 很 多 优秀 图 标的 出 
加 | 现 ， 这 些 图 标 通 过 不 同 的 质感 与 纹理 来 体现 图 标的 风格 、 特 色 。 


v 贰 各 党 果 质 应 


糖果 的 质感 从 颜色 、 光 泽 度 、 透 明度 等 多 方面 体现 。 

中 设计 思路 

本 市 实例 绘制 糖果 质感 的 图 标 ， 给 制 圆 角 和 矩形 作为 图 标的 外 形 ， 使 用 粉色 体现 糖果 的 
颜色 ， 以 图 层 样 式 实现 图 标的 高 光 、 阴 影 效果 ， 体 现 糖 采 的 质感 ， 图 2-188 所 示 为 制作 
流程 图 。 





2-188 制作 流程 图 


团 参考 素材 


搜集 糖果 的 素材 ， 体 现 糖 果 的 特色 之 处 ,便于 在 制作 时 进行 参考 ， 如 图 2-189 所 示 。 





图 2-189 糖果 素材 


国 制作 图 标 
下 面 介绍 图 标的 制作 。 





() 中 本 i “ 圆 角 和 矩形 工具 ”绘制 圆 角 () 


填充 颜色 为 #e74898， 如 
图 2-190 有 





2-190 绘制 圆 角 和 矩 形 
03 双击 进入 “图 层 样 式 ” 对 话 框 ， 
选择 “投影 ” 复 选 杠 ， 设 置 参数 ， 
颜色 为 #c5bfab， 如 图 2-192 所 示 。 






























































样式 es 
结构 
混合 选项 奔 认 
二 混合 模式 (6) 正常 Ml 
二 等 高 线 不 透明 度 O): 一 一 一 一 % i 
口 等 高 A 财 预 览 (V) 
纹理 角度 (A): ey) 90 ” 度 回 使 用 全 局 光 (G) 一 
= 一 一 距离 D): AT 8 人 么 素 | 
= 大 小 9): T= 一 一 10 像素 
口 颜色 又 加 品质 
局 新 变 权 加 等 高 线 : Pe 回 湖 肝 据 上 (0 
回 图 案 琶 加 
一 外 发 光 杂 色 (N): ee 0 oo 




















图 层 控 空 投影 (U) 


设置 为 默认 值 复位 为 默认 值 


| 























图 2-192 设置 “投影 ” 


05 
06 





图 2-194 得 到 的 图 形 





04 


在 “属性 ”面板 中 设置 宽 
高 参数 以 及 圆 角 半径 ， 如 图 


2-191 所 示 。 


回 | 加 阁 氟 状 属性 





a 
[J j=] 
[mn [J 
站 EEC 
口 所 全 ] 所 全 “| 吕 








2-191 设置 参数 


单 击 “确定 ”按钮 ， 效 果 如 几 
wi i 
你 





图 2-193 添加 投影 效果 


绘制 两 个 日 色 的 贺 角 和 矩形 ， 减 去 顶层 
形状 ， 得 到 的 图 形 如 图 2-194 所 示 。 
为 图 层 添加 “颜色 车 加 ”样式 ， 如 图 
2-195 所 示 。 


一 颜色 到 加 
颜色 


混合 模式 (6): 正常 ~ 国力 
不 透明 度 (0): =py 100  % 


设置 为 默认 值 复位 为 默认 值 





























2-195 添加 “颜色 茎 加 ”样式 


Photoshop 创意 @ 合 p 质 素 设 计 从 入 门 到 精通 





() 执行 确定 操作 后 的 图 像 效 果 如 
图 2-196 所 示 。 





图 2-196 图 像 效 果 
() 复制 图 层 ， 然 后 双击 缩 略 图 ， 
修改 颜色 为 #fe9ccd， 并 将 高 
度 略 微调 小 ， 如 图 2-198 所 示 。 





图 2-198 修改 颜色 并 调 小 


| 选择 “ 棚 圆 工具 ”， | 

设置 填充 色 为 日 
色 ， 绘 制 正 圆 ， 如 图 2-200 
所 示 。 





图 2-200 绘制 正 圆 








() 用 同样 的 方法 继续 绘制 图 形 ， 如 
图 2-197 所 示 。 





2-197 继续 绘制 图 形 


| 为 图 层 评 加 “内 阴影 ”样式 ， 


如 图 2-199 所 示 。 








为 图 层 添 加 绽 版 ， 
绘制 图 形 后 设置 
不 透明 度 参 数 为 80%， 如 图 
2-201 所 示 。 


内 阴影 
车 攀 


混合 模式 (8): 正片 到底 ~ 国 国 
十 透明 度 (D)， ee 75  %0 
角度 人) AT -30 ” 度 加 使 用 全 局 光 避 ) 


阳 塞 全: 0 
大 小 国 : 一 22 像素 


图 2-199 添加 “内 阴影 ”样式 
使 用 “矩形 


] 3 am 


矩形， 如 图 2-202 所 示 。 

















2-201 添加 蒙 版 





2-202 绘制 矩形 


| 4 为 图 层 添加 “和 斜面 和 浮雕 ”“ 内 阴影 ” 























样式 ， 如 图 2-203 所 示 。 


“投影 ” 
































斜面 和 学 隔 人 投影 
_ 结构 - 内 阴影 2 
样式 :内 侧面 ~ 一 车 攀 - [| 
< 昌 合 模式 介 ): 正片 受 底 
方法 (Q): 平滑 ~ 混合 模式 (6): 正常 要 [a 
深度 DO): T= 一 100 % 不 透明 度 (0): = 75  % 
半 不 透明 度 (0): = 86  % A 
TOE OF PE 角度 (A): |、 上】 90 度 器] 使 用 全 局 光 () 
去 小 (2): | 3 像素 A : f 1 了 se Ds 
软化 Fi = 0 像素 角度 从 er 30 度 思 使 用 全 局 光 (6) 距离 (0): > 4 像素 
阴影 - 距离 DO) 6 像素 扩展 RQ): C= 一 0  % 
角度 (N): 全 120 度 阻塞 (0): 0 o% 大 小 BS): 攻 4 像素 
， ) 回 使 用 全 局 光 () 一 -一 一 -一 
高 度 : 一 0 度 大 小 (5): == 6 像素 - 品质 - = 
光泽 等 高 线 ee 注 人 上 品质 等 高 线 ; [A 消 隐 锯 贞 () 
高 光 模 式 (H): 涯 色 -= 隶 色 (IC 0 % 
de 等 高 线 : [4 加 湖 逐 据 齿 () 
阴影 模式 (A): 正常 ~ El 攻 同 图 层 挖 空 投影 (U) 
不 通明 度 (0): 一 ys 一 询 一 % 杂 色 (NG 0 % 设置 为 默认 值 | [ 复位 为 味 认 值 






















































































] 


图 2-203 添加 图 层 样式 


单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 
图 像 效果 如 图 2-204 所 示 。 





1 7/ 


图 2-204 图 像 效 果 
使 用 “椭圆 工具 ”绘制 两 个 
彬 病 ， 如 图 AOle 所 示 。 





图 2-206 绘制 两 个 椭圆 


| J A I WL Nan 
充 颜 色 为 白色 ， 绘 制 矩 形 ， 
如 图 2-205 所 示 。 








图 2-205 绘制 矩形 
| 人 在 “图 层 ” 面 板 中 按 住 Alt 
键 单 击 两 个 图 层 中 间 创 建 剪 
贴 蒙 版 ， 如 图 2-207 所 示 。 





| 


iWE: 四 2 中 和 人 i: [100%] 


= 





a 
地 逆 果 





2-207 创建 剪贴 蒙 版 











Photoshop 创意 全 pb 所 未 没 计 从 入 门 到 精通 
图 像 效果 如 图 2-208 所 示 。 使 用 “椭圆 工具 ”绘制 正 圆 ， 
] O 几 () 如 图 2-209 所 示 。 





2-208 图 像 效 果 图 2-209 绘制 正 贺 
岗 为 图 层 添 加 “渐变 到 加 ”样式 ， 人 0 由 完成 最 终 效果 , 如 图 2-211 所 示 。 
如 图 2-210 所 示 。 


新 变 到 加 
渐变 
混合 模式 (0) 正常 ~ 回 念 色 
不 透明 度 p): 一 100  % 
浙 交 : [| 癌 后 向 fn 


样式 (D: 线性 ”” 团 与 图 层 对 充 们 


/本 全 = 
角度 (N): ge WE 度 


清 衣 Ge 100 哆 
衣 置 汐 味 示 值 县 位 为 默认 值 





2-211 完成 最 终 效果 





图 2-210 添加 “渐变 到 加 ”样式 


(CED 木头 纹理 


在 APP UI 中 我 们 经 常 
[1 设计 思 


本 实例 制作 木头 纹理 图 标 ， 绘 制 圆 形 作 为 图 标的 基本 形 ， 为 图 层 添 加 “图 案 寺 加” 
层 样式 ， 实 现 本 纹 效果 ; 在 木 纹 上 添加 高 光 ， 实 现 玻 璃 罩 的 反光 与 阴影 ， 立 体感 与 视觉 感 


十 足 。 图 2-212 所 示 为 制作 流程 图 。 


见 到 木 纹 元 素 ， 木 头 的 纹理 质感 给 人 一 种 与 众 不 同 的 感 吏 。 








2-212 制作 流程 图 


国 参考 素材 
根据 设计 思路 搜集 素材 作为 参考 ， 包 括 木 纹 素材 、 玻 璃 淖 素 材 以 及 其 他 木 纹 图 标 ， 如 
A 所 示 。 





图 2-213 参考 素材 
仿制 作 图 标 
下 面 介绍 木头 纹理 图 标的 制作 。 


a 使 用 “椭圆 工具 ” 按 住 Shift 02 在 um 对 话 框 中 设置 
绘制 正副， 如 图 2-214 所 示 。 “投影 ”选项 , 如 图 2-215 所 示 。 




















样式 
混合 选 珊 竹 认 
ET 混合 模式 (6): 线性 加 深 -加 到 
加 入 让 寻 不 透明 度 (0): 一 z= 一 一 44  % 
刁 纹理 角度 (A): (| ) 50 度 回 使 用 全 局 光 (G) 
| 一 中 高 Dr 一 6 你 未 
和 扩展 R): A 二 一 0 % 
站 大 小 5): 四 6 像素 
口 颜色 到 加 品质 
丫 淅 变 到 加 高 绪 ; | | 问 清 祭 加 点 个 
口 图 案 权 加 
问 外 发 光 杂 色 (N): G 
财 图 层 挖 空 投影 (U) 
[设置 为 默认 值 。| | 复位 为 默认 值 | 
图 2-214 绘制 正 圆 图 2-215 设置 “投影 ”选项 


3 单 击 “ 确 定 ” 按 0 4 在 “图 层 ” 面 板 中 设置 不 透明 度 为 0%、 填充 
钮 ， 图 像 效 果 如 图 为 0%， 如 图 2-217 所 示 。 
2-216 所 示 。 





Photoshop 创意 全 p 所 未 设计 从 入 门 到 精通 
更 先 $U| - 





1 


























图 2-216 图 像 效果 


按 Ctr1l+J 组合 键 复制 一 层 ， 并 修改 图 层 样式 ， 如 图 2-218 所 示 。 








0> 
































投影 
结构 
温 合 选项 协 认 
i 混合 模式 (8) 线性 加 军 ~ 国 国 
等 高 线 不 透明 度 (D): 全 | 23 96 
纹理 角度 (A): | * | 90 度 辣 | 使 用 全 局 光 (G) 
了 一 距离 (D): 1 像素 
和 te 扩展 RQ): A 二 一 0。 % 
光泽 大 小 (5S): 甘 4 像 吉 
颜色 又 加 品质 
站 渐变 全 加 党 线 | - 消除 锯齿 () 
习 图 案 到 加 
外 发 光 杂 色 (人 :9 0 926 
本 图 层 挖 空 投影 (J) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
样式 渐变 亚 加 
温 合 选项 革 认 人 
等 高 绪 不 透明 度 (p); | 59 9o 
纹理 新 交 : [ER 口 反 向 (R) 
描 边 样式 (0): 线性 ~ ” 财 与 图 层 对 齐 (1) 
站 风 虹 角度 0:( 上) 0 度 
内 发 光 一 
光泽 缩放 (5): 100 史 
mS [ 设 村 为 加 认 值 | [ 复位 为 吉 认 值 | 
习 图 案 到 加 
外 发 光 
可 投影 








图 2-217 设置 不 透明 度 与 填充 

















各 二 内 阴影 
混合 选 责 : 积 认 
0 混合 模式 (6): 正片 亚 底 -Nl 
村 二 不 透明 度 (o); 60  %% 
纹理 前 度 (A): | ，) -0 ” 度 回 使 用 全 局 光 (G) 
vibe 
ey 阻塞 (0): 0 % 
一 一 大 小 8): 四 5 全 素 
颜色 到 加 品质 
了 一 等 高 绪 : ~ 消除 锯齿 人) 
J 辣 杀 管 川 
Re 杂 N: 二 一 0 % 
可 投影 | 设置 为 默认 值 | | 复位 为 默认 值 | 








样式 
瘟 语 选项 : 黑 认 
斜面 和 浮雕 
等 高 续 
纹理 
摘 边 
站 内 阴影 
颜色 人 亚 加 
站 渐变 亚 加 
外 发 泊 
习 投影 





图 案 琶 加 

图 案 

混合 模式 (6): 正常 = 

不 透明 度 人 NM): zy 100 % 





图 案 : 











缩放 (5): Z5 100 呢 
久 | 与 图 层 链接 () 


| 设置 为 默认 值 | | 复位 为 默认 值 | 














U 


图 2-218 修改 图 层 样 式 


单 击 “ 确 定 ” 控 钮 ， 图 像 
效果 如 图 2-219 所 示 。 





2-219 图 像 效果 





UV/ 


如 图 2-220 所 示 。 





2-220 绘制 椭圆 


使 用 “椭圆 工具 ”绘制 李 圆 ， 





0 为 图 层 添加 内 阴影 ”图 层 样式 ， 0 O 设置 图 层 填充 为 0%， 效 果 如 图 
如 图 2-221 所 示 。 2 





内 阴影 
混合 模式 (6): 线性 光 - 
不 淫 明 度 (0): 一 一 一 65  % 


角度 (A): ， 0 ” 度 回 使 用 全 局 光 人 加 
| 











距离 D): 一 一 一 一 3 像素 
阻塞 (CY): nt La 
大 小 站) PP 号 像 喜 





图 2-221 添加 “内 阴影 ”图 层 样式 图 2-222 设置 填充 后 的 效果 


a ] 复制 图 层 并 将 圆 压 扁 ， 然 后 取消 选中 “内 阴影 

二 但 量 有 和 人 复 选 框 ， 设 置 “ 投 影 ” 参 数 ， 如 图 2-223 所 示 。 
填充 只 是 改变 填充 部 分 的 不 透 | ll 
| | 执行 确定 操作 后 图 像 如 图 2-224 所 示 。 


明度 。 
| READMORE | 


\ 标 
/ . 设 
混合 模式 (6): 线性 加 深 ~ 国 国 本 











不 透明 度 (D)， 一 一 一 各 % 
角度 (A): ® ) 120 ” 度 园 使 有 全 局 光 (G) 
中 高 Dj: /一 一 了” 刚 素 


扩展 让 De 0 Dt 
大 小 (Sh EGG 村 橡 吉 











图 2-223 设置 “投影 ”参数 图 2-224 设置 投影 后 的 效果 


| pee eo 13 使 用 “椭圆 工具 ”绘制 椭圆 ， 如 
i 图 2-226 所 示 。 然 后 选择 图 层 ， 
单 击 鼠标 右键 ,执行 “从 图 层 建立 组 ”命令 ， 





图 2-225 复制 图 层 图 2-226 绘制 椭圆 





Photoshop 创意 合 P 缸 素 设计 从 入 门 到 精通 





14 为 图 层次 加 内 友 有 6 条 雪 和 训 四 投 昧 全 式 证 图 2052270 泊 示 。 













































































内 发- 投影 
| i 亮光 一 靳 朗 亚 加 一 结构 
To 一 一 渐变 混合 模式 (6)， 正片 又 底 - 国 
i 混合 模式 (0)， 正常 ~ 回访 色 TOO: 3 % 
不 通明 度 P): 二 2s 100 % 角度 A: | ) 50。 度 器 使用 全 局 光 (G 
方法 Q: 精确 ~ 淅 六 [国生 | 局 | 反 各 (R) 中 高 D): A 一 1 像素 
源 :O @j : % 
de 样式 (D: 线性 ~” 团 与 图 层 对 齐 () ts 5 
阳 塞 QO: A 一 一 o。 % 大 小 (3): SS 一生 4 像素 
大 小 G): 国人 像素 ! 
0 : 角度 人 :| )s0 府 器 
| A1| 回 消 队 锯齿 () 缩放 (5): 一 一 一 一 一 100 % 等 高 线 : [A 加 | 消除 锯 具 人 
范围 R: 一 0 % 杂 色 NM): A 一 0 % 
ne = ”设置 为 默认 值 | | 复位 为 默认 值 i 
[设置 为 默认 值 |】 [ 复位 为 默认 值 | 设置 为 默认 值 复位 为 默认 值 
































图 2-227 添加 图 层 样式 


| 单 击 “ 人 确定” 按钮 ， 图 像 如 图 16 使 用 “椭圆 工具 ”绘制 椭圆 ， 
2 220 并 在 


“属性 ”面板 中 设置 填充 
色 为 线性 渐变 ， 如 图 2-229 所 示 。 


二 说 拥 : 状 属性 
tt: 




















图 线性 :| | (图 


缩放 : [5 | -| % [加 与 图 层 对 齐 





2-228 图 像 效果 2-229 设置 填充 色 


| / 图 像 效 果 如 图 2-230 所 示 。 | N 将 其 转换 为 智能 对 象 ， 执 行 “ 滤 


镜 ”| “模糊 ”|“ 高 斯 模糊 ”命令 ， 
模糊 后 的 效果 如 图 2-231 所 示 。 





图 2-230 图 像 效 果 图 2-231 高 斯 模糊 效果 








设置 组 的 个 透明 度 为 61%， 图 


| 再 次 绘制 椭圆 ， 对 椭圆 进行 变 
像 效 果 如 图 2-233 所 示 。 


形 ， 设 置 填 充 颜色 为 白色 到 透 
明 的 径 回 渐变 ， 如 图 2-232 所 示 。 


20 








2-233 设置 不 透明 度 效果 


图 2-232 设置 填充 颜色 


为 图 层 设 置 “ 和 斜面 和 浮雕 ”以 及 “渐变 登 加 ” 
样式 ， 如 图 2-234 所 示 。 





一 斜面 和 浮雕 一 一 一 -一 
一 结构 


样式 (D: 内 斜面 ~ 











高 光 模 式 (H): 线性 光 














”到 


不 透明 度 (0):; CS 21  % 


阴影 模式 (A): 线性 加 深 


”Ml 


不 透明 度 (O: = 40  % 








角度 (N): 0 90 度 


编 放 全) 一 ,x+;—» 一 一 


























100 % 





方法 Q): 平时 > 二 二 好 全 访 于 本 
和 执行 确定 操作 后 的 效果 如 图 2-235 所 示 。 
方向 :@ 上 ”OF 下 
大 小 D = 21 像素 
软化 中 :CT 0 像素 一 渐变 又 加 
ee 渐变 
角度 M: 。 、90 度 混合 模式 (0): 线性 光 ~ 回访 色 
人 。 ) 回 使 用 全 局 光 (G) 不 透明度 P): 一 69 % 
Em 尖 交 : OY| D&A®) 
光泽 等 高 线 : [4 消除 锯齿 样式 (): 线性 ~ 团 与 图 层 对 齐 (D) 





设置 为 默认 值 复位 为 默认 值 




















设置 为 默认 值 复位 为 默认 值 





图 2-234 添加 图 层 样 式 图 2-235 图 像 效 果 


2 3 添加 “和 斜面 和 浮雕 ”以 及 “渐变 妓 加 ” 样 却 ， 如 图 2-236 所 示 。 


一 笠 面 和 浮 肝 一 一 


Ee 新 变 到 加 

样式 :内 镍 面 新 变 

方法 (Q): 平滑 M 人 

党 DT 温 会 模式 (o): 线性 光 ~ 回访 色 

eit 不 透明 度 P): 一 一 69  % 
汀 交 : 国 古 下 天 | | 回 皮 向 (R) 


大 小 人 :Eee 21 | 你 束 
攀 化 全 :AP | 0 像素 

-阴影 - 样式 种 : 续 性 ”加 与 图 层 对 齐 人 0 

角度 MW: 。、125 诬 A 

角度 0: (1! )s0 府 


人 。 ) 回 使 用 全 局 光 人 
高 度 “一 69 人 
光泽 等 高 线 ; [4 消 扎 占 2 
] 绵 有 所 (35): ro | oe 
高 光 模 式 (H): 线性 光 四 | Riis) 


不 透明 度 (0): = 21 % 
保 直 为 南 世 值 县 位 为 喜 让 值 


阴影 模式 (A): 线性 加 深 ~ 国 国 
不 透明 度 (C): 一 2 一 40 






































图 2-236 添加 图 层 样式 








Photoshop 创意 合 P 缸 素 设计 从 入 门 到 精通 





骨 执行 确定 操作 后 的 图 像 效 果 如 几 S 使 用 “ 圆 角 和 矩形 工具 ”绘制 指针 ， 
图 2-237 所 示 。 


如 图 2-238 所 示 。 





图 2-237 图 像 效 果 图 2-238 绘制 指针 
全 选择 一 个 圆 角 抑 形 图 层 ， 设 置 “颜色 登 加 ”和 “投影 ”样式 ， 如 图 2-239 
所 示 。 


一 投影 
结构 


裔 色 
四 混合 模式 6): 线性 光 A 
泌 辣 模式 但): 正常 ™ | | 不 透明 度 (0): 7 一 > 26 

不 透明 度 (0):， 一 == 100 % 前 度 (A): 人 120 ” 度 加 使 用 全 局 光 (G) 
中 高 D): 一 一 1 ”像素 


设置 为 默认 值 | [复位 为 默认 值 一 


大 小 3): Ce 0 像素 























图 2-239 添加 图 层 样 式 


Wi 确定 后 拷贝 图 层 样 式 ， 粘 贴 到 2 % 使 用 “ 横 排 文字 工具 ”输入 文字 ， 
男 外 两 个 加 角 乱 形 的 图 层 上 ， 如 图 2-241 所 示 。 

并 修改 “颜色 有 登 加 ”的 颜色 ， 完 成 的 效果 

如 图 2-240 所 示 。 





图 2-240 完成 的 效果 图 2-241 输入 文字 








添加 “颜色 登 加 ”和 “投影 ” 
图 层 样式 ， 效 果 如 图 2-242 


iy 


所 示 。 





图 2-242 添加 图 层 样式 效果 


执行 确定 操作 后 图 像 效 果 如 图 
2 于 


3 ] 





图 2-244 图 像 效 果 















































Ss sa 66 转 上 A 9?9 
3 3 为 图 层 添加 “内 阴影 
了 内 发 光 
内 阴影 
结构 
机 混合 模式 (5) 线性 加 夷 - 
混合 模式 (6): 正片 亚 底 ~ Ml 不 通明 六 Oj: 一 一 而 
不 通明 度 0): 一 85  % 杂 色 MN: 一 6 
角度 (A): (1 】-50 ” 度 问 使 用 全 局 光 (G) 9 国 也 
oy 一 =- 
距离 D): 一 3 ”像素 jh 
阴 赛 QO: 一 1 % re 
意 : 全 9 
大 小 (9): 呈 re” 像素 中 人 ©) 9 也 绢 (G) 
阻塞 (0): 2 一 7 
品质 大 小 5): 一 CS 40 
党 线 | 上 器 清 祭 刀 点 人 
一 等 高 线 : [A 本 消 帝 据 具 (0) 
范围 从 ): [全 50 
[设置 为 默认 值 | [ 复位 为 默认 值 | 拉动 0): 5 0 














3() 添加 系 材 图 片 ， 并 为 其 添加 
a Ea Te 


2-243 所 示 。 


混合 模式 (6): 正片 亚 底 ~ 国 国 
不 透明 度 (0): 一 各 % 
角度 :| | ) 56 度 回 使 用 全 局 光 人 
像素 
oo, 
像素 


30 


a 


耻 离 {D): :5 em 
扩展 人 ie 0 
大 小 (5)]: PR | 了 


2-243 添加 “投影 ”图 层 样 式 


jm 


使 用 “椭圆 工具 ”绘制 椭圆 ， 
如 图 2-245 所 示 。 


图 2-245 绘制 椭圆 


“内 发 光 ” 和 “渐变 早 加 ”样式 ， 如 图 2-246 所 示 。 


























渐变 又 加 
渐变 
混合 模式 (0): 颜色 加 深 ~ 辣 仿 色 
不 透明 度 P): 一 2 一 一 40 % 
i [Mv | © Kr) 
样式 (D): 线性 ~ ” 团 与 图 层 对 齐 (D 
角度 M:( 上 18 度 
缩放 (5): Z5 100 % 
% 设置 为 默认 值 | | 揽 位 为 默认 值 

















图 2-246 添加 图 层 样式 





Photoshop 创意 合 p 质 素 设 计 从 入 门 到 精通 






3 单 击 “确定” 按钮 后 3 S 复制 图 层 ， 然 后 清除 图 层 样式 ， 添 加 “和 斜 
的 图 像 效 果 如 图 2-247 | 
























































斜面 和 浮雕 等 高 线 
结构 图 素 [确定 
et 取消 
样式 (TD): 内 笠 面 ” 等 高 Fh 消除 锯 上 中 [二 
方法 Q): 平时 。 es = 3 
深度 D): AR 100  % | 
方向 : @ 上 下 预 设 (P): 自 定 ~ 
大 小 (Z): 总 133 ”像素 映射 
软化 Fi = 16 像素 
一 阴影- 
角度 MN): 、120 度 
(nb ) 回 使 用 全 局 光 (G) 
光泽 等 高 线 : | 4: | 门 消除 锯齿 QD) 
高 光 模式 (H): 滤 色 MG 
不 透明 度 (0O): 39  % 
阴影 模式 (A): 正片 县 底 ~ 国 国 输入 : 46 % i 
不 透明 度 (C): CO 33  % 输出 : 53 % 
2-247 图 像 效果 图 2-248 添加 图 层 样 式 


3 O 添加 “ 描 边 ”“ 内 阴影 ”图 层 样式 ， 如 图 2-249 所 示 。 











一 早 构 | 一 结构 
大 小 GB): 4 像素 混合 模式 (6): 正片 县 底 ~ 
位 置 p)， 外 部 ~ 不 透明 度 (O): = 1 % 


混合 模式 (6)， 正常 - 角度 (4): [ 、 120 。 度 加 使 用 全 局 光 (G 


“透明度 (D) 9 一 = 
Ts 下 高 中 到 


一 填充 类 型 人)， 颜色 ~ Ee 有 
MS) P= 5 像素 


等 言 线 ; [A 器 沽 刹 申 中 


杂 色 的: 二 = 一 0 














| 一 品质 












































2-249 添加 图 层 样式 





37 设置 图 层 的 不 透明 度 为 40%、 填 充 为 0%， 如 图 2-250 所 示 ， 此 时 的 图 像 效 果 如 
图 2-251 所 示 。 然 后 新 建 图 屋 ， 添 加 素材 ， 完 成 效果 如 图 2-252 所 示 。 





[ov | 





| @ 内 阴影 


| 鲁 反 轩 








电 效果 
凶 内 阴影 
图 2-250 设置 参数 图 2-251 图 像 效果 图 2-252 添加 素材 


织 布 纹理 











织 布 的 特点 是 经 纱 和 纬 纱 相互 交错 或 彼此 沉浮 ， 呈 现 有 规律 。 织 布 根据 纹理 及 坚韧 程 


赣 又 分 为 很 多 种 ， 如 麻布 、 


设计 思路 


本 实例 绘制 的 图 标 外 形 
理 的 效果 ,绘制 虚线 使 得 织 


IN 


亨 厚 的 书籍 ， 书 籍 的 封面 通过 妓 加 粗布 素材 实现 织 布 纹 
布 纹理 更 为 通 真 , 底 和 侧面 则 通过 又 加 牛皮 素材 丰富 图 标 外 形 ， 


pa pA el ar | 





参考 素材 


制作 纹理 图 标 要 求 纹理 


示 为 布 纹理 和 和 牛皮 纹理 。 





图 2-253 制作 流程 图 


此 在 搜集 素材 时 需要 纹理 清晰 的 大 图 ， 图 2-254 所 





一 
A 
人 
一 。 


| 
-一 一 * 一 9 A 一 ， 一 ， 一 * 耳 放 一 丫 一 上 -一 一 一 和 一 一 少 一 4 一 4 一 4 一 一 2 一 2 一 让 一 一。 一 4 一 人 


TT 
一 一 一 es 一 一 一 一 一 一 一 一 * 一 一 一 一 一 一 一 一 . 


: -好 
人 A py 

ed 

i 


制作 图 标 





介绍 织 布 纹理 图 标的 制作 。 


SN 


加 角 和 矩形 , 如 图 2-255 所 示 。 

() 册 将 其 转换 为 
智能 对 和 象 ， 

然后 执行 “ 滤 镜 ”|“ 模 


糊 ”|“ 形 状 模 糊 ” 命 令 ， 
如 图 2-256 所 示 。 


其 它 
Digimarc 


浏览 联机 污 漠 … 





图 2-255 绘制 圆 角 和 矩形 2-256 执行 “形状 模糊 ”命令 








更 哆 2U Photoshop 创意 合 p 质 索 设 计 从 入 门 到 精通 








在 打开 的 对 话 框 中 设置 半径 ， 
选择 圆 角 方 形 , 如 图 2-257 所 示 。 


0 









日 






半径 (R): 像素 








图 2-257 选择 圆 角 方形 


设置 “斜面 和 浮雕 ”及 
射 面 和 浮 苦 


单 击 “确定 ”按钮 后 图 像 如 图 
2 5 


04 





图 2-258 图 像 效 果 


绘制 贺 角 和 矩形， 如 图 2-259 所 示 。 然 后 双击 图 层 , 进入 “图 层 样式 ”对 话 框 ， 


“等 高 线 ”样式 ， 如 图 2-260 所 示 。 





样式 (D: 内 斜面 了 
方法 (Q): 平滑 本 
深度 D): 车 














方向 : @ 上 下 
大 小 人 D: 一 Z 35 ”像素 
软化 (F): 7 像素 
阴影 
角度 (N): 3 90 度 
| *， | 回 使 用 全 局 光 (G) 
高 度 ”|32 | 度 
光泽 等 高 线 : | - 消除 锯齿 (L) 
高 光 模式 (H): 滤 色 M4 
不 透明 度 (D): 75 % 
阴影 模式 (A): 正片 县 底 ~ 国 国 
不 透明 度 (C): 75 % 











| 设置 为 默认 值 | | 复位 为 默认 值 | 














等 高 线 

图 素 

等 襄 续 :| 下 | 消除 锯齿 人 (1) 
范围 (R): 国 |% 











图 2-259 绘制 圆 角 矩形 


单 击 “确定 ”按钮 后 的 图 像 效 
果 如 图 2-261 所 示 。 


0 





图 2-261 图 像 效 果 





图 2-260 设置 图 层 样式 
将 素材 打开 并 拖 入 文档 ， 然 


UV/ 按 住 Alt okey int nee 
创建 六 贴 怪 版 ， 效 果 如 图 2-262 所 示 。 








2-262 创建 剪贴 蒙 版 





() % 设置 图 层 的 混合 模式 为 “ 铸 加 ”、 09 Po | 
不 透明 度 为 48%， 如 图 2-263 


区 Re 


议定 : 回 of 机 看 十 癌 :[1oo%| -| 








图 2-263 设置 图 2-264 图 像 效果 
| 选择 “ 圆 角 抠 形 工具 ”， | | 为 图 层 添加 “和 斜面 和 浮 膨 ”“ 投 影 ” 样 式 ， 
设置 填充 颜色 为 日 色 ， 如 图 2-266 所 示 。 


绘制 圆 角 和 抱 形 , 如 图 2-265 所 示 。 


斜面 和 浮 央 ， 

区 es 9 
样式 0: 内 利 面 ~ 标 
方法 oj: 平时 。 ~ 混合 模式 (6): 正片 到底 ~ 国 国 设 
深度 D): 本 53  % 

gy 
方向 : 图 上 ©@ 下 不 透明 度 (O): [A 59 % Dae 
大 小 Di: = 一 1 像素 /A Ee 
软化 (F): 所 0 像素 角度 (A): 上 | 90 度 局 使 用 全 局 光 (G) 
有 距离 D): 人 4 像素 
角度 0: 一 、 50 度 
( 。 ) 加 使 用 全 局 光 (G) 扩展 人 :Cr 0 % 
高 度 : 一 度 
大 小 (5): < 七 13 ”像素 

光泽 等 高 线 : py 回 消除 锯齿 () 

高 光 模式 (H): 源 色 ~ 品质 

不 透明 度 (D): il75 |% - 

阴影 模式 (A)， 正片 委 底 - Em 等 高 线 : | | 加 消除 锯齿 () 

不 透明 度 (C): 5 75 % i 

二 (N): 0 % 
|_ 设置 为 默认 值 | | 复位 为 默认 值 | 人 


图 2-265 绘制 圆 角 天 形 图 2-266 添加 图 层 样式 


由 将 其 放置 在 新 建 的 组 中 ， 然 后 选择 图 层 ， 在 按 住 Alt 键 的 同时 按 同 上 方 同 键 1 
多 次 ， 效 果 如 图 2-267 所 示 。 
















































在 图 层 上 创建 蒙 版 并 填充 背景 ,然后 选择 “ 圆 角 和 矩形 工具 ”, 设置 填充 闫 色 为 白色 ， 
绘制 圆 角 宅 形 ， 蒙 版 效果 如 图 2-268 所 示 。 





1p 型 :| 回 wTEBg 由 
| 正常 *| 不 和 明 度 : |100% | ~ 
锁 E: 加 sf 中 自 ”填充 :|100%|- 





























图 2-267 效果 图 2-268 蒙 版 效果 





Photoshop 创意 合 p 缸 素 设计 从 入 门 到 精通 





] 4 添加 蒙 版 后 的 效果 如 图 2-269 | S 绘制 图 形 ， 填 充 颜 色 为 


所 示 。 #d0701a， 如 图 2-270 所 示 。 





图 2-269 添加 蒙 版 后 的 效果 图 2-270 绘制 图 形 


| O 为 图 层 添加 “ 矢 面 和 浮雕 ”“ 投 影 ” 图 层 样式 ， 如 图 2-271 所 示 。 












































一 射 面 和 浮雕 
结构 
样式 (D): 内 斜面 
方法 (Q): 平滑 M 
深度 (D0): 65 Tm] % . 

Ni OE OF 温 侣 模式 (6): 正片 亚 底 ~ 国 国 
大 小 Or 一 13 像素 
软化 中 : 一 9 一 12 像素 不 远 明 弃 (GY): - + 50 0 

阴影 jp ] > 
a 用 度 (A): | * | 390 度 团 使 用 全 局 光 (6) 
ts SS 二 
光泽 等 高 线 | -| stat 距离 伯 )， 全 于 — 上 
高 光 模式 ()。 源 色 -| ] 
不 透明 度 (0): 一 Z 35  % 扩 展 (R): 
阴影 模式 (A): 正片 一 底 -En 大 小 四 ps 
不 透明 度 (C): = 75  % 

















图 2-271 添加 图 层 样式 


| / 单 击 “确定 ”按钮 后 关闭 对 话 框 ， | 复制 图 层 ， 然 后 按 住 Ctrl 刍 
此 时 的 图 像 如 图 2-272 所 示 。 单 击 图 层 缩 览 图 填充 颜色 
#c06413， 如 图 2-273 所 示 。 





图 2-272 图 像 效 果 图 2-273 填充 颜色 





新 建 图 层 ， 调 整 图 层 到 组 1 图 层 的 上 方 ， 然 后 绘制 书 封面 的 阴影 ， 设 置 不 透明 
度 为 62%， 如 图 2-274 所 示 ， 此 时 的 图 像 效 果 如 图 2-275 所 示 。 


图 2-274 设置 不 透明 度 图 2-275 图 像 效 果 





En 


i 6 本 
ae 





册 () 添加 素材 图 片 ， 如 图 2-276 所 示 。 然 后 在 “图 层 ” 面板 中 设置 混合 模式 为 “ 登 加 ”， 
设置 不 透明 度 参数 为 39%， 如 图 2-277 所 示 ， 设 置 后 的 效果 如 图 2-278 所 示 。 


图 2-276 添加 素材 图 2-277 设置 参数 图 2-278 效果 


Wl 绘制 图 形 并 添加 图 厂 ， 创 建 枝 贴 壹 版 ， 如 图 2-279 所 示 ， 然 后 为 图 层 添 加 “ 冬 
面 和 浮雕 ”样式 ， 如 图 2-280 所 示 。 





P 类 型 :| 国外 工人 品 明 四 
要 加 :|| 秋明 度 [30% [~ | 
说 E: 团 中国 填 襄 :100% -| 
四 ii 




















一 射 面 和 浮 岩 
一 结构 一 
样式 (D): 内 斜面 
方法 (Q): 平滑 MM 
深度 DO): T= 261 % 
方向 : @@ 上 © 下 
大 小 C): = 24 ”和 企 素 





软化 中 一 3 一 12 像素 








阴影 








角度 人: [二 90 度 
” ) 回 使 用 全 局 光 (G) 
高 度 : 32 度 


光泽 等 高 线 : | -- -| 消除 锯齿 人) 


高 光 模 式 (H): 源 色 -| 
不 透明 度 (0): 一 2 一 一 22  % 


阴影 模式 (A):” 正片 又 底 ~ 国 国 
不 透明 度 (C0): 一 一 75 ” % 


[要 二 下 和 
图 2-279 创建 剪贴 蒙 版 图 2-280 添加 图 层 样 式 












































更 哆 2U Photoshop 创意 合 p 质 索 设 计 从 入 门 到 精通 





信人 绘制 图 形 ， 如 图 2-281 所 示 。 


pa 


使 用 “ 圆 角 矩形 工具 ”绘制 圆 角 
定形 作为 线 ， 然 后 复制 多 个 进行 


左 对 齐 和 水 平 居 中 分 布 ， 如 图 22282 所 未。 





图 2-281 绘制 图 形 


7 4 将 所 有 的 线 整理 到 一 个 组 中 ， 然 后 选择 组 中 的 一 个 图 层 ， 为 图 层 梁 加 “ 笠 面 和 


序 雕 ”“ 内 阴 





图 2-282 绘制 圆 角 和 珑 形 


时 和 “投影 ” A 如 图 见于 岂 必 中 所 示 。 





和 斜面 和 浮雕 

结构 
样式 (): 浮 持 效果 ~ 
方法 (Q): 平滑 * 








深度 (D): zx 261 % 
方向 : @ 上 下 

大 小 (2): 后 3 像素 

软化 中 ): 53 2 像素 





明 影 
角度 NM: “、50 度 





。 | 同 使 用 全 局 光 (G) 
高 度 : 一 32 度 
光泽 等 高 续 :| -| 回 注 祭 锯 具 ( 
高 光 模式 H): 源 色 ~ 
不 透明 度 (0): 三 64  % 
阴影 模式 (A): 正片 到 底 ~ 国 国 
不 透明 度 (C): 51 % 








[设置 为 默认 值 。] [ 复位 为 默认 值 | 











内 阴影 
结构 
混合 模式 (6): 正片 县 底 ~ 国 国 
不 透明 度 (D): 一 z= 一 一 50  % 


角度 (A): (| ) 50 度 加 使 用 全 局 光 (G) 











距离 |D): 4 1 像素 

阻塞 (0): 人 0 % 

大 小 (5): OO 1 像素 
品质 

等 高 续 : | - 口 ] 消除 锯齿 人) 

末 色 (N): G 0 % 








| 设置 为 默认 值 | | 复位 为 默认 值 | 





























投影 
混合 模式 (8) 正片 又 底 ~ 国 国 
不 透明 度 (o): 二 信 
角度 (A): (| ) 50 度 团 使 用 全 局 光 (6) 
距离 D): 三 2 像素 
扩展 R): 所 9g % 
大 小 (5): 三 7 ”像素 
品质 
| - 回 消 闪 锯 具 () 
杂 色 (N): 4 0 wo 
团 图 层 挖 空 投影 (U) 
[设置 为 默认 值 | [ 复位 为 默认 值 | 











oa eget, 


组 中 的 所 有 图 层 上 ， 如 图 


2-284 所 示 。 


图 2-284 粘贴 图 层 样式 








图 2-283 添加 图 层 样 式 
新 建 图 层 ， 然 后 回 
下 调整 一 层 ， 并 使 
用 “画笔 工具 ”在 线 的 下 方 绘 
制 阴影 ， 如 图 2-285 所 示 。 


图 2-285 绘制 阴影 








屿 WW 使 用 “椭圆 工 
具 ” “定形 工具 ?” 


和 “上 自 定 形状 工具 ”绘制 图 
形 ， 如 图 2-286 所 示 。 





图 2-286 绘制 图 形 





(DR 这 本 
和 “投影 ”样式 ， 如 图 2-287 所 示 。 

















es 颜色 到 加 0 

Etch 

混合 术 式 (B)， 颜色 加 这 3 一 颜色 混合 模式 (D): 正片 到 底 ~ 回访 色 
混合 模式 (6): 颜色 加 深 本 一 不 诅 明 度 pi: 一 0 一 39 % 
不 透明 度 (o); 一 75 十 % 竟 合 模式 (8) 正常 证 本 区: | 口上 向 w 





pr “] 委 日 O): 全 % QD: 线 | | 园 去 六 
名 度 (Ny: ( | ) 页 一 度 回 使 用 全 局 光 G) 不 透明 度 (0) A 4 样式 (): 线性 同 与 图 层 M 章 四 


s - - ee 角度 N:( |) 0。 度 
中 高 D): 5 2 像素 设置 为 默认 值 | [ 夏 位 为 默认 值 2 
阻塞 (0): 人 0 % 缩放 (5): 一 二 一 


大 小 (5): 5 10 像素 | 设置 为 默认 值 | | 复位 为 点 认 值 | 








100 % 


















































一 结构 ee 
并 合 模 陈 企 ) ”颜色 加 深 a 
不 透明 度 (a): p= 19 人 滤 色 本 

杂 色 人 :0 不 透明 度 (0): 50  % 


© 图 © ”| 角度 (A): ( | ) 90 ” 度 回 使 用 全 局 光 (G) 















































| 中 高 D): 一 3 
方法 外): 柔和 ~ 扩展 人 :全 0 


jb 同 = 
扩展 他 ) 要 0 大 路 上 5 
大 小 5): 5 0 
























































| /| Dts EM 


范围 由: 一 一 0 % 来 双人 N): 全 0 


:A 0 % - 本 
图 后 控 宇 控 影 员 ) A 


设置 为 默认 值 | | 复位 为 默认 值 计 







































































































































































图 2-287 添加 图 层 样式 


79 执行 确定 操作 后 效果 如 图 3 单 击 图 层 压 部 的 “创建 新 的 
rte 所 示 。 填充 或 调整 图 层 ” 按钮 ， 选 





| 未 i 盘 明度 : [39%。| - | 


= 





通道 混合 器 .… 











图 2-288 效果 图 2-289 选择 “色彩 平衡 ”选项 





更 哆 2U Photoshop 创意 合 p 质 素 设 计 从 入 门 到 精通 





3 在 展开 的 “属性 ”面板 中 设 32 完成 设置 后 最 终 效 果 如 图 
202010 


置 参 数 ， 如 图 2-290 所 示 。 


加 色彩 平 衔 
他 用 :| 中 间 调 : 





图 2-291 最 终 效 果 





Y 部 | 制作。 





时 间 图 标 不 论 外 形 如何 ， 指 针 和 钟 盘 是 必 不 可 少 的 ， 在 需要 的 情况 下 可 以 对 指针 和 钟 
盘 进 行 变化 设计 。 下 面 介绍 一 个 写实 风格 的 时 间 图 标 ， 图 2-292 所 示 为 制作 流程 图 。 





图 2-292 制作 流程 图 


O01 新 建文 档 ， 在 “图 层 ” 面 板 底 ()2 弹出 对 话 框 ， 单 击 渐变 色 ， 如 
部 单 击 “ 新 的 填充 或 调整 图 层 ” 图 2-294 所 示 。 
按钮 , 选择 “渐变 ”选项 , 如 图 2-293 所 示 。 





PP 类 型 ?| 国名 工 品 明 国 
正常 | 不 甬 明 度 : [100%| ~ 
be 











角度 [Aj:( | 1 90 


编 让 (5): | 100 | ， | % 
辐 反 向 (R) ”回访 色 (D) 
与 图 层 对 齐 (L) 








图 2-293 选择 “渐变 ”选项 图 2-294 单 击 渐变 色 


() 在 弹出 的 对 话 框 中 修改 色 标 ， 第 一 个 色 标 的 颜色 为 反 daebf， 第 二 个 色 标 的 颜 
色 为 #596c80， 位 置 为 75%， 如 图 2-295 所 示 。 








() 单 击 “ 人 确定” 按钮 ， 修 改 样式 
为 “ 径 同 ”、 缩 放 为 200%， 如 
图 2-296 所 示 。 设 


















名 称 (N): ” 自 定 





| ”渐变 类 型 (T): 实 底 7 


平滑 度 (M): 100 »| % 


wl 








下 样式 (T): 径 向 ~ 
全 角度 (A): (| 80 
一 色 标 





“i 





不 得 明度 > | 位 填 wo 星际 (D) 


颜色 : 轩 时 | 位 置 (C): % 遇 除 (D) 





记 | 仿 色 (D) 
与 图 层 对 私 (L) 

















图 2-295 设置 色 标 颜色 与 位 置 图 2-296 修改 样式 与 缩放 


() 单 击 “ 确 定 ” 按 钮 后 效果 如 图 (QO 使 用 “ 圆 角 和 窍 形 工 具 ” 绘 制 贺 
2-297 所 示 。 


角 乍 形 ， 如 图 2-298 所 示 。 





图 2-297 确定 效果 图 2-298 绘制 圆 角 和 天 形 





更 辩 gU| Photoshop 创意 依 p 所 未 设计 从 入 门 到 精通 





0 


按 Ctrl+J 组 合 键 复制 图 层 ， 修 改 颜色 为 
羡 加 ”图 层 样式 ， 参 数 如 图 2-299 所 示 ， 渐 变 颜色 如 图 2-300 所 示 。 





黑色 ， 并 缩小 1 px。 再 为 其 添加 “渐变 











EE 渐变 要 SF = 

样式 二 

| [一 浙 虹 一 ] | 

二 i 

ma | | | 混合 模 式 (o): 正 尖 ~ 回信 名 es 
| 不 租 明 度 P): 一 2 100  % ] se 
口 等 高 绪 = | CS 
口 妾 理 新 六 [和 | | D&A) 有 -|| 

回 措 这 样式 (0D): 线性 ~ 加 与 图 层 对 齐 问 本 一 一 

一 站 天 影 前 度 (N); @ 下 45 | 度 新 变 类 型 (T): 实 底 ~ 

回 内 点 尖 . i 平滑 度 (M): 100| »|% 

回 光泽 洋 放 人 二 lo0 % 

盖头 双 委 加 设置 为 默认 值 | | 揽 位 为 默认 值 站 es 

af Sk 

回 图 案 肢 加 y 吊 除 (D) 

辐 外 反光 是 除 (D) 

加 投影 




















0 





图 2-299 添加 “渐变 到 加 ”样式 


单 击 “确定 ”按钮 后 的 图 像 效 
果 如 图 2-301 所 示 。 


图 2-301 图 像 效 果 





样式 
况 合 选项 凌 认 


丫 颜色 县 加 
回 渐变 器 加 





图 2-300 渐变 颜色 


继续 绘制 贺 角 和 矩形， 如 图 2-302 
所 示 。 


U 





图 2-302 绘制 圆 角 托 形 




















和 硬币 再 | () 为 图 层 添加 “ 冬 面 和 浮雕 ”“ 漠 变 早 加” 样式， 
结构 各 
样式 0: 内 色 面 如 图 2-303 所 示 。 
方法 Q): 平时 。 uu | 
ee 执行 确定 操作 后 的 效果 如 图 2-304 所 示 。 
六 :@ 上 A 下 
大 小 D0: 于 一 3 像 吉 
软化 (F): Co 一 === 0 像素 
明 影 释 未 渐变 要 加 
角度 (N): 30 度 泥 稿 运 贡 款 认 a 和 一 
| ，9] 口 合用 全 局 yf(6) ed ee i 
言 度 , 一 了 H 度 和 源 六: [EGG 二 | | 反 操 (R) 
辐 描 边 样式 人 4): 线性 ~ ， 园 与 图 层 对 齐全 
二 | | D8 et A 
二 缩放 (5): 6 % 
高 光 模式 (H): 滤 色 Y man [ 二 | [可 位 为 蒜 浴 值 ] 
不 透明 度 (0); CS 0 % 加 图 案 委 加 
阴影 模式 (A): 柔 光 -a 和 
不 透明 度 (0); se 50  % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 














图 


2-303 添加 图 层 样式 


图 2-304 效果 








] 2 使 用 “椭圆 工具 ”绘制 正 圆 ， 并 进行 高 期 模糊， 如 图 2-305 所 示 。 然 后 复制 一 层 ， 
问 下 移动 一 层 ， 添 加 网 层 杰 版 ， 并 在 驼 版 中 进行 绘制 ， 效 果 如 图 2-306 所 示 。 





2-305 绘制 圆 并 进行 高 斯 模糊 2-306 效果 
| 3 复制 图 层 ， 修 改 颜 色 为 ] 复制 图 层 , 添加 聚 版 ,然后 使 用 ， 


#ff4326, 如 图 2-307 所 示 。 “画笔 工具 ”进行 绘制 ， 效 果 
如 图 2-308 所 示 。 





图 2-307 复制 图 层 并 修改 颜色 图 2-308 绘制 蒙 版 


| S 为 图 层 添加 “混合 选项 ”, 如 图 2-309 所 示 。 然后 复制 图 层 , 为 图 层 添加 “内 阴影 ” 
和 “渐变 登 加 ”样式 ， 如 图 2-310 所 示 。 






















































































































































































样式 — 二 拓 本 淅 变 县 加 E 
常规 ; 比 王 _ 新 变 
9 i mba 二 4# 面 - 混合 模 式 @)， 正 太太 ~ 国 硬 四 
纹理 高 级 混合 0 
A 日 一 % 
一 一 和 角度 (A): | ” -150 度 口 使 用 全 局 光 人 不适 aa 本 
可 内 发 光 控 空 N): 无 距 高 Di: = 一 1 ”像素 
避 光 泽 将 内 部 效果 混合 成 组 外 阳 塞 (0: 一 0 % 样式 (): 线性 ~ 加 与 图 层 对 齐 钊 
站 基本 A 大 小 @) 4 起 素 A 
Re 外 图 层 小 (S) 02 一» 
渐变 要 加 可 图 层 蒙 版 隐藏 效果 () | _| 角度 (N): 人 uy | 120 度 
口 图 案 要 加 矢量 蒙 版 隐藏 效果 (H) 品质 
口外 发 光 ca 
攻 一 浊 S@ 澳 BE - : S 一 一 一 一 一 % 
抽 ee $s: | "| Cini 纺 放 (5): a 
[> | 设置 为 默认 值 | ~ | 复位 为 点 认 值 
a A | 杂 色 人 N): G "0 % ”设置 为 默认 值 | | 复位 为 默认 值 
下 一 图 层 : 0 255 E 
Te 有 设置 为 默认 值 复位 为 默认 值 




















图 2-309 添加 “混合 选项 ” 图 2-310 添加 “内 阴影 ”和 “渐变 羡 加 ”样式 





Photoshop 创意 合 P 缸 素 设计 从 入 门 到 精通 





单 击 “确定 ”按钮 后 图 像 效 果 如 图 2311 所 示 。 然 后 复制 图 层 ， 添 加 “内 阴影 ” 
样式 ， 如 图 2-312 所 示 。 


















































一 内 阴影 
结构 
混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): se 10 % 
角度 mw: ( 】 机 度 器 使 用 全 局 光 人 ) 
阻塞 (0): (一 0 % 
大 小 (S): 一 一 3 像素 
一 品质 
等 高 线 : LU 器 洒 逐 据点 ( 
床 色 (人 :< 0 % 
[设置 为 默认 值 “] [ 复位 为 默认 值 | 

















图 2-311 确定 效果 
] 绘制 椭圆 ， 设 置 蒙 版 并 添加 混 
合 选 项 ， 人 然后 绘制 几 处 高 光 ， 
如 图 2-313 所 示 。 





2-313 绘制 高 光 


为 图 层 添 加 笠 面 和 浮雕 ”样式 ， 
如 图 2-315 所 示 。 


] 


























斜面 和 浮 央 
样式 (1T): 内 斜面 
方法 (Q): 平滑 ~ 
深度 D): TT 一 100 % 
方向 : © 上 @ 下 
大 小 (Z): Fn 4 像 吉 
软化 Fi C= 二 0 像素 
一 阴影 一 
角度 W: ”50 度 
人 ，) 回 使 用 全 局 光 (G) 
高 度 一 30 度 
光泽 等 高 线 : [A 消除 锯齿 人 
高 光 模式 (H)， 源 色 -| | 
不 透明 度 (0): 一 7 一 一 60  % 
阴影 模式 (A): 正片 到 底 ~ 国 国 
不 透明 度 (C): = 45  % 




















图 2-315 添加 “和 斜面 和 浮雕 ”样式 





图 2-312 添加 “内 阴影 ”样式 

| N 使 用 “椭圆 工具 ”绘制 正 圆 ， 
并 设置 填充 颜色 为 灰色 ， 如 图 

2-314 所 示 。 








2-314 绘制 正 圆 


单 击 “确定 ”按钮 后 的 图 像 如 
图 2-316 所 示 。 


网 





2-316 效果 





咏 | 复制 图 层 ， 为 图 层 添加 “混合 选项 ”和 “内 阴影 ”样式 ， 如 图 2-317 所 示 。 





一 内 阴影 - 
北 痛 选 现 _ 结构 


吊 规 此 有 有 混合 模式 (6): 正片 又 底 ~ 国 
混 舍 模式 D): 正常 不 透明 度 (0): = 85  % 
不 透明 度 (0): 一人 % 角度 (A): ( ”) 各 度 回 使 用 全 局 光 (G) 
高 源 瘟 言 距离 (D0): 丰 3 像素 
填充 不 透明 度 人 ): A 一 一 0 er 0 2 
通道 : 圆 RR]) 贺 6(s) 加 (8) | 一 
控 空 由 : 无 ~ 一 品质 


加 | 将 内 部 效果 温 侣 成 组 人 种 
四 比 合成 组 人 P) 


上 图 导 丫 ' 


有 设置 为 默认 值 和 夏 位 为 默认 值 















































图 2-317 添加 图 层 样式 


由 2) 添加 图 层 蒙 版 并 进行 涂抹 ， 涂 i: 使 用 “本国 工具 ”绘制 一 个 小 
抹 后 的 效果 如 图 2-318 所 示 。 圆 ， 如 图 2-319 所 示 。 





图 2-318 添加 蒙 版 涂抹 后 的 效果 图 2-319 绘制 小 圆 
的 为 图 层 添 加 图 层 样 式 ， 并 设置 上» 复制 图 层 ， 并 按 Ctrl+T 组 合 键 
“ 描 边 ”“ 内 阴影 ”和 “投影 ” 将 圆 放 大 ， 如 图 2-321 所 示 。 
参数 , 确定 后 的 图 像 效 果 如 图 2-320 所 示 。 





图 2-320 图 像 效果 图 2-321 复制 并 放大 圆 





Photoshop 创意 全 p 所 未 设 计 从 入 门 到 精通 
更 赞 $U| - 








27O0 使 用 “和 窍 形 工 具 ” 绘 制 刻 度 ， 并 Wy 使 用 “定形 工具 ”绘制 指针 ， 如 
图 2-323 所 示 。 


添加 投影 ?样式 ,如 图 2-322 所 示 。 





图 2-322 绘制 刻度 图 2-323 绘制 指针 

a % 复制 图 层 ， 并 移 至 下 一 层 ， 然 后 几 用 同样 的 方法 绘制 其 他 指针 ， 如 
进行 高 斯 模糊 ， 效 果 如 图 2-324 图 2-325 所 示 。 

所 霖 | 





2-324 高 斯 模糊 效果 图 2-325 绘制 其 他 指针 

3 () 绘制 郑 形 ， 将 其 移 至 背景 图 层 3 | 调整 到 时 钟 的 下 方 ， 完 成 时 钟 
的 上 方 ， 并 进行 高 斯 模糊 ， 如 图 标的 制作 ， 如 图 2-327 所 示 。 

图 2-326 所 示 。 








2-326 绘制 矩形 并 进行 高 斯 模糊 2-327 完成 效果 





(C 葬 克 照相 机 国标 


照相 机 图 标 是 通过 相机 镜头 表现 出 来 的 ， 本 实例 绘制 的 是 扁平 化 的 照相 机 图 标 ， 通 过 
多 个 大 小 不 同 的 圈 来 表现 相机 镜头 ， 图 2-328 所 示 为 制作 流程 图 。 





U] 


©O) 








© 





2-328 制作 流程 图 


使 用 “ 圆 角 矩形 工具 ”绘制 圆 
角 抢 形 ， 填 充 颜 色 为 #02dcbb， 


如 图 2-329 所 示 。 
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2-329 绘制 圆 角 算 形 


使 用 “椭圆 工具 ”绘制 正 贺 ， 闫 
色 为 白色 ， 如 图 2-331 所 示 。 








2-331 绘制 正 圆 


(02 使 用 “和 矩形 工具 ”绘制 矩形 ， 
并 填充 颜色 为 #1489e3， 如 图 
2 





2_330 绘制 矩形 
(4 使 用 “ 李 圆 工具 ”继续 绘制 正 圆 ， 
修改 填充 颜色 为 #lac4aa， 如 图 

Do 3a 





图 2-332 绘制 圆 





更 哆 2U Photoshop 创意 合 p 质 索 设 计 从 入 门 到 精通 
mo “0 








() 继续 使 用 “椭圆 工具 ”绘制 两 个 贺 ， 使 所 有 圆 的 圆心 对 齐 ， 如 图 2-333 所 示 。 
然后 选择 “椭圆 工具 ”， 设 置 填 元 其 色 为 #e2fbf7， 在 如 图 2-334 所 示 的 位 置 


绘制 正 圆 ， 完 成 绘制 。 


图 2-333 绘制 圆 图 2-334 完成 绘制 





CEB 周 押 图 斥 


本 实例 绘制 的 是 日 历 图 标 ， 图 2-335 所 示 为 制作 流程 图 。 





图 2-335 制作 流程 图 


() ] 使 用 “ 圆 角 和 抑 形 工具 ”绘制 圆 角 和 拢 形 ， 填 充 颜 色 为 #ed2b58， 如 图 2-336 所 示 。 
然后 为 图 层 添 加 “内 阴影 ”和 “内 发 光 ” 样 式 ， 如 图 2-337 所 示 。 


内 阴影 内 发 光 
结构 结构 
混合 模式 介 ): 
瘟 合 模式 (8): 波 色 三 不 透明 度 (0): 


不 透明 度 (0): 23 20 % 杂 色 (N): G 
前 度 (A): | 《。 | 90 度 同 使 用 全 局 光 (G) 
图 素 


距离 D0): 4 1 像素 方法 (Q): 柔和 ~ 
阻塞 (0): ”0 % 源 :局 居 中 但) ”名 边 综 (G6) 
大 小 (5): 0 像素 阳 塞 人: 人 
大 小 (5): 6 
品质 
品质 
号 i 
等 高 绪 : - 消除 锯 齿 (L) 党 线 | ] 消除 锯 占 QD 
杂 色 (N): 6 % 范围 R): 5 
拉动 QD: 














| 设置 为 默认 值 | | 揽 位 为 默认 值 





| 设置 为 默认 值 | | 复位 为 默认 值 | 








图 2-336 绘制 圆 角 算 形 图 2-337 添加 图 层 样 式 








(2 为 图 属 添加 “ 产 灾 和 敬 胃 ”和 | 投影 冬 去 几 如 图 2339 所 示 ， 单 击 ”确定 ”过 
钮 后 的 图 像 效 果 如 图 2-339 所 示 。 











渐变 到 加 投影 
渐变 结构 
混合 模式 (0): 正常 7 回 仿 色 
不 透明 度 P); = 1 混合 模式 (6): 正片 县 底 ~ 国 国 
渐变 : | | 反 向 (R) 不 透明 度 (O): 17 % 
样式 (): 线性 Y” 团 与 图 层 对 齐 (D) 
角度 Wy: (|) 120 度 角度 (A): | py 90 ” 度 加 使 用 全 局 光 (G) 
缩放 (5): 一 一 10 % 有 距 高 Dr 7 像素 
|_ 设置 为 默认 值 _| |[ 复位 为 默认 值 | 扩展 (R): 人 0 % 








大 小 BS): 5 一 一 一 一 13 | 像素 








图 2-338 继续 添加 图 层 样 式 图 2-339 图 像 效 果 


() 3 使 用 “和 矩形 工具 ” () 4 使 用 “路 径 选 择 工 () S 设置 后 的 图 像 效 果 
绘制 矩形 ， 如 图 yas 如 图 2-342 所 示 。 
2-340 所 示 。 在 选项 栏 中 单 击 “ 减 去 顶层 
形状 ”选项 , 如 图 2-341 所 示 。 





国 中 二 站 对 守 边 如 





且 与 形状 


贸 合并 形状 组 件 














图 2-340 绘制 矩形 图 2-341 单 击 “ 减 去 顶层 形状 ”选项 图 2-342 设置 后 的 效果 


QO 为 该 图 层 添加 “内 阴影 ”“ 颜 色 炙 加 ”和 “渐变 释 加 ”样式 ， 如 图 2-343 所 示 。 






































内 阴影 颜色 到 加 渐变 全 加 

结构 颜 色 淅 变 

ee 小 色 混合 模式 (o): 正常 ~ 回访 色 

不 透明 度 (0): i 2 混合 模式 (6): 正常 ~ 图 国 不 透明 度 (p); ZY 100  %% 
角度 (A): | “外 度 回 使 用 全 局 光 (G) 不 透明 度 (DO): PN 100  %% 淅 次 :， [| | 反 向 (R) 
a G 样式 (): 线性 v ”与 图 层 对 齐 (D) 

:© o “Nn. * > ~ 

i lg | 设置 为 默认 值 | | 复位 为 默认 值 | 角度 WW: S120 一度 

品质 缩放 6): 一 7s= 100 % 
二 :| -| 阅 消 系 锯 占 D 

| 设置 为 默认 值 。| | 复位 为 默认 值 | 

杂 色 人 N): G 0 % 








| 设置 为 默认 值 | | 复位 为 默认 值 | 

















图 2-343 添加 图 层 样 式 


() / 执行 确定 操作 后 的 图 像 效 果 如 (})®& 使 用 “和 矩形 工具 ”在 左 侧 绘制 
图 2-344 所 示 。 一 个 小 矩形 ， 凑 色 为 抽 31414， 
并 复制 一 个 到 右 侧 ， 如 图 2-345 所 示 。 
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图 2-344 图 像 效 果 图 2-345 绘制 矩形 并 复制 
再 次 复制 两 个 矩形 ， 修 改 颜 色 使 用 “线条 工具 ”绘制 线条 ， 
为 #5b0e0e， 并 将 其 高 度 调 小 ， 如 图 2-347 所 示 。 


如 图 2-346 所 示 。 





2-346 复制 矩形 2-347 绘制 线条 
为 图 层 添 加 “投影 ”样式 ， 如 执行 确定 操作 后 的 图 像 如 图 
图 2-348 所 示 。 2-349 所 示 。 


:发育 模 陈 下 ): 正常 
不 表明 度 (O): 


角度: | | 机 医 


距离 DO): 和 
扩展 RJ: 





太 小 (5): 否 


守 高 线 : | -| 消除 锅 齿 册 ) 


冰 色 人 N): 二 


~ 图 后 挖 宇 探 昧 员 ) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 





2-348 添加 图 层 样式 2-349 图 像 效果 





1 EN OA 
we A ee pt dn 2 
































渐变 到 加 投影 
渐变 结构 
混合 模式 (0): 正常 ~ 癌 仿 色 re ” 
i 不 透明 度 (O): 75 % 
不 透明 度 (P): ~ FE |% 
和 | 口 Eam ce 
LI 口 sa 
距离 (DO): 1 像素 
Ee 二! ” -一 -一 
样式 (): 线性 可 与 图 层 对 齐 们 re i 
前 度 (N): [| ， | 90 度 大 小 9): /= 一 1 ”像素 
缩放 (5): 一 y 请 
zs 伯 * 100 op 
等 高 线 : [4 消除 锯齿 人 
| 设置 为 默认 值 | | 复位 为 默认 值 | 杂 色 (N): 0 一 一 % 
yj 图 层 控 空 投影 (U) 
| 设置 为 默认 值 | | “复位 为 默认 值 | 




















图 2-350 输入 文字 图 2-351 添加 图 层 样 式 
执行 确定 操作 后 的 图 像 效 果 如 使 用 “和 矩形 工具 ”绘制 长 投影 ， 
图 2-352 所 示 。 设置 图 层 的 不 透明 度 为 50%， 


效 琳 如 图 2-353 所 示 。 


2-352 图 像 效果 图 2-353 绘制 长 投影 


添加 图 层 蒙 版 ， 填 充 黑 色 ， 然 后 按 住 Ctrl 键 单 击 最 底层 的 圆 角 和 矩形 ， 载 入 选择 
后 再 次 选择 蒙 版 ,填充 白色 ， 使 用 “画笔 工具 ”进行 涂抹 ， 效 果 如 图 2-354 所 示 。 
按 住 Alt 键 单 击 蒙 版 缩 略 图 可 以 查看 又 厂 的 效果 ， 如 图 2-355 所 示 。 


2-354 涂抹 效果 图 2-355 查看 蒙 版 效果 








更 哆 2U Photoshop 创意 合 p 质 索 设 计 从 入 门 到 精通 





] 8 绘制 矩形 , 将 其 调整 至 背景 图 层 上 方 ， 设置 图 层 不 透明 度 为 50%， 并 将 窍 形 旋 转 ， 
如 图 2-356 所 示 。 
] O 矩形 的 填充 颜色 为 渐变 填充 ， 渐 变色 为 黑色 到 白色， 如 图 2-357 所 示 。 





i | Li 
样式 (T): 线性 [取消 











S S AN 前 度 [A): ( | ) on 度 
7 缩放 (5): |100 | ，|% 
ee pa 四 友 向 (R) 图 | 蕊 色 (D) 
与 图 层 对 弃 ( 
图 2-356 绘制 矩形 并 旋转 图 2-357 渐变 填充 





果 如 图 2-358 蒙 版 填充 白色 到 黑 果 如 图 2-360 
所 示 。 色 的 渐变 ， 如 图 2-359 所 示 。 所 示 。 


28 居中 25 


2-358 图 像 效果 图 2-359 添加 蒙 版 图 2-360 完成 效果 


作 此 时 的 图 像 效 Dl 装 加 岁 层 过 版 ， 为 太志 最 终 的 完成 效 








六 设计 提醒 要 网 苇 一 一 一 一 一 一 一 一 一 一 一 一 一 


网 保证 边缘 清晰 

如 图 2-361 所 示 ， 将 两 个 图 标 放 大 显示 可 以 清楚 地 看 到 第 一 个 图 标 不 如 第 二 个 图 标 
清晰 ， 出 现 边缘 发 虚 的 情况 。 我 们 知道 ， 图 标 设 计 必 须 保 证 清晰 显示 。 在 绘制 图 标 前 进入 
Photoshop 中 进行 设置 , 执行 “编辑 ”| 首选 项 | “和音 规 ”命令 , 在 打开 的 对 话 框 中 选中 “将 
矢量 工具 与 变化 和 像素 网 格 对 齐 ” 复 选 框 ， 如 图 2-362 所 示 。 
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[SR 
机 拾 色 器 (C): Adobe - 
a HUD 拾 色 器 (H): 色相 条 纹 (小 ) - 
文件 处 理 图 像 插值 (D): 两 次 立方 (自动) 到 
性 能 选项 
透明 度 与 色 域 自动 更 新 打开 的 文档 (A) 
单位 与 标尺 完成 后 用 声音 提示 (D) 
参考 线 、 网 格 和 切片 吕 动 态 颜色 涓 块 (Y) 
增 效 工 具 J 导出 剪贴 板 (X) 
文字 Y| 司 用 Sh 认 键 切换 工具 (U) 
站 在 置 入 时 调整 图 像 太 小 (6) 
带动 国 效 果 的 缩放 (Z) 
缩放 时 调整 窗口 大 小 (R) 
站 | 用 滚轮 缩放 (5) 
将 单 击 点 缩放 至 中 心 (K) 
个 个 可 启用 轻 击 平移 (F) 
可 根据 HUD 委 直 移动 未 改变 圆 形 画 和 硬度 
了 将 栅 榨 化 图 像 作为 智能 对 象 置 入 或 扼 动 (]) 
_。 门 所 小 和 二 矢 时 工具 和 这 红星 否 检 生动 使 形状 与 信 素 网 格 对 刘 。 | 



































2-361 两 个 图 标 2-362 选中 复 选 框 


国 使 用 路 径 选项 

绘制 图 标 时 以 基本 的 图 形 为 基础 ， 在 选项 栏 中 使 用 “路 径 操作 ” “路 径 对 齐 ” “路 径 
排列 ”三 个 选项 进行 图 形 的 相交 、 相 减 ， 如 图 2-363 所 示 。 这 样 做 的 好 处 是 可 以 自由 调 
整 每 个 基础 形 的 细节 ， 避 免 手 动 调节 节点 造成 偏差 。 


PS 文件 [F) 编辑 昌 ” ”图像 四 ”图 层 (L) 类 蜡 I(Y) 选择 全 沪 第 四 ”视图 VW) 窗口 (W) ”帮助 (H) 








-| 坟 i: 罗 接 4: [BB 点 [7][ 一 "|w: co 号 对 这 虞 | 口 ] 多 呆 路 径 卸 动 
图 2_363 路 径 选项 避 
] 又 
计 


名 小 径 操作 国 : 路 径 与 路 径 之 间 进 行 相 交 、 王 加 、 排 除 等 操作 。 
加 小 径 对 卉 国 : 路 径 与 路 径 之 间 的 对 齐 操作 。 


名 小 径 排列 较 : 调整 路 径 与 路 径 之 间 的 上 下 关系 。 





国 圆 角 规则 


线性 图 标的 圆 角 有 内 、 外 两 个 ， 内 圆 角 的 半径 = 外 圆 角 的 半径 - 线 的 宽度 。 线 条 未 
端 圆 角 半径 为 线 宽 的 1/2， 如 图 2-364 所 示 。 





末 问 国 角 半径 =1'2 线 讽 


i «lpx X 有 
i | 


™ - 
a 


图 2-364 圆 角 规则 
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园 图 标 缩放 
线性 图 标 等 比例 缩放 会 导致 线条 粗细 改变 ， 破 坏 页 面 的 统一 性 ， 因 此 同一 图 标的 多 种 
尺寸 需要 重新 绘制 。 同 时 ， 图 标 放大 后 可 以 适当 补充 一 些 细节 ， 如 图 2-365 所 示 。 


辐 等 比例 放大 加 X 


人 
二 ”重新 绘制 2 | © 
制 | | 


图 2-365 图 标的 放大 与 重新 绘制 


\CZEE 如何 提升 应 用 国标 的 点 击 率 


很 多 设计 师 都 会 遇 到 同一 个 问题 ， 设 计 出 的 应 用 图 标 自我 感觉 很 好 ， 但 是 放 到 应 用 市 
场 上 后 却 并 不 受 欢 迎 ， 点 击 率 和 下 载 量 都 很 低 。 那 么 如 何 提升 应 用 图 标的 点 击 率 呢 ? 

应 用 启动 图 标 是 应 用 软件 的 关键 组 成 部 分 ， 它 不 仅 给 用 户 带 来 了 第 一 印象 ， 传 达 了 应 
用 程序 的 基础 信息 ,也 是 一 个 非常 重要 的 软件 入 口 ， 能 直接 引导 用 户 下 载 并 使 用 应 用 程序 。 

国运 用 视觉 隐喻 的 同时 保证 图 标的 可 识别 性 

为 了 吸引 用 户 去 使 用 APP 软件 ， 设 计 师 必须 设计 出 吸引 用 户 眼 球 的 图 标 。 通 过 运用 
隐喻 的 设计 表现 手法 传达 给 用 户 程序 的 信息 ， 让 用 户 看 到 图 标 能 够 感知 、 想 象 、 理 解 图 标 
的 意思 。 

大 家 进入 APP 应 用 市 场 会 发 现 同类 的 程序 有 很 多 ， 但 吸引 眼球 的 APP 图 标 却 不 多 。 
例如 ， 在 搜索 “绕口令 ”程序 时 会 出 现 同类 程序 的 图 标 ， 如 图 2-366 所 示 ， 在 这 几 种 图 
标 设计 中 比较 吸引 用 户 去 点 击 的 是 如 图 2-367 所 示 的 图 标 。 它 的 设计 采用 的 就 是 隐喻 的 
视觉 表现 手法 ， 让 用 户 理解 绕口令 的 含义 ， 再 加 上 趣味 性 的 形象 设计 ， 让 用 户 容易 理解 图 
标的 含义 ， 这 样 的 精致 隐喻 的 图 标 容易 在 第 一 时 间 吸 引用 户 的 眼球 ， 受 到 用 户 的 喜爱 。 





图 2-366 绕口令 图 标 2-367 吸引 用 户 点 击 的 图 标 
















如 图 2-368 所 示 ， 这 是 星巴克 的 一 款 应 用 程序 图 
| a 
的 消费 卡 的 APP 图 标 设计 中 星巴克 的 标志 比较 小 ， 用 / : 
户 在 下 载 时 看 到 这 枚 图 标 设 计 ， 圈 形 的 星巴克 标志 比 ITTTTT SS caro 
较 难 以 辨认 。 其 实在 设计 时 应 该 放大 星巴克 的 商标 ， 
提高 标识 的 可 识别 。 因 此 ， 我 们 在 使 用 视觉 隐喻 的 手 
法 去 表现 图 标的 同时 需要 确保 图 标 设计 的 识别 性 。 ln 





国 分 析 同 类 APP 图 标 ,注重 图 标 创新 
我 们 搜索 “效率 ”软件 会 发 现 很 多 相似 的 图 标 ， 如 图 2-369 所 示 ， 这 里 面 哪些 图 标 
更 吸引 用 户 的 眼球 呢 ? 


TT 
1 
| i i 
i 二 梧 洒 。 


图 2-369 “效率 ”软件 图 标 
我 们 发 现 ， 那 些 有 层次 设计 感 和 质感 的 精致 图 标 更 容易 吸引 用 户 关 注 ， 能 够 在 第 一 时 
加 抓 住 用 户 眼球 的 图 标 有 三 个 ， 如 图 2-370 所 示 。 





图 2-370 吸引 用 户 的 图 标 
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下 和 面 对 这 三 个 图 标 进 行 分 析 。 


《加 第 一 个 图 标 就 像 一 堆 文件 有 序 处 理 的 感觉 ， 缝 制 的 皮革 质地 和 洁净 便条 形成 质 
感 的 对 比 ， 图 标 整 体质 感 细 腻 、 饱 满 。 

人 @ 第 二 个 图 标的 表现 方式 与 众 不同 ， 富 有 创造 性 和 趣味 性 。 图 标 采用 文件 箱子 和 
箭头 的 视觉 元 素 表 现 ， 表 达 事 件 处 理 的 迅速 效率 的 感觉 ; 在 色彩 上 运用 了 纯度 
很 高 的 亮色 去 设计 ， 能 够 抓 住 用 户 的 眼球 ， 让 用 户 很 快 地 理解 这 款 软件 的 功能 
特性 
第 三 个 图 标 给 人 的 第 一 感觉 像 一 堆 文件 整齐 地 堆放 在 一 个 办 公 桌 上 ， 虽 然 在 视 

觉 表 现 上 没有 给 人 留 下 很 深刻 的 印象 ， 但 是 图 标 画 得 非常 精致 ， 纸 张 的 堆积 效 
果 表 现 出 了 图 标的 层次 感 ， 背 景 木材 纹理 的 效果 提升 了 ee 的 质感 





因此 ， 设 计 APP 图 标的 另 一 种 方法 是 增加 图 标的 层次 感 设计 和 质感 表现 。 设 计 好 图 
标 后 放 在 同类 别 APP 图 标 中 ， 对 比 查看 自己 设计 的 图 标 是 否 能 够 抓 住 用 户 的 眼球 。 

图 运用 软件 界面 中 的 图 形 元 素 体现 图 标 设计 的 连续 性 

启动 图 标的 设计 运用 和 应 用 程序 界面 图 形 相 匹配 的 设计 元 素 可 以 确保 图 标的 表现 和 软 
件 具 有 连续 性 。 图 2-371 所 示 为 一 个 很 好 的 例子 ， 图 标 与 程序 界面 元 素 相 匹配 。 
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图 2-371 图 标 与 程序 界面 元 素 相 匹配 











@ 寺 采用 用 户 好 奇 的 图 形 元 素 设 计 ， 抓 住 用 户 的 好 奇 心 


在 图 2-372 中 用 高 雅 的 轮廓 、 优 美 
的 线条 去 表现 一 款 瑜伽 应 用 程序 图 标 ， 
唤起 用 户 的 好 奇 心 ， 吸 引用 户 使 用 。 





@ 突出 品牌 ， 抓 住 用 户 眼 球 


在 设计 一 个 知名 品牌 的 APP 图 标 时 
不 要 浪费 了 一 个 知名 品 脾 的 现 有 元 素 以 
及 充分 使 用 它 的 品牌 Logo。 这 些 品 牌 标 
志 已 经 留 给 用 户 很 深刻 的 印象 ， 非 常 容 
易 从 众多 APP 的 图 标 中 胜出 。 请 

图 标 在 没有 突出 知名 品牌 元 素 的 情况 下 ， 单 独 看 时 依旧 很 容易 辨认 ， 如 图 2-373 
所 示 。 但 是 ， 在 众多 的 APP 图 标 界 面 中 就 会 显得 很 无 力 ， 无 法 与 其 他 图 标 竞争 ， 如 图 
2 
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图 2-373 单独 浏览 的 图 标 
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图 2-374 放 在 众多 图 标 中 








Photoshop 创意 





全 bp 所 未 没 计 从 入 门 到 精通 





此 时 ， 只 要 调整 图 标 设计 的 局 部 ， 改 进 设计 ， 如 图 2-375 所 示 。 再 将 新 的 图 标 放 在 


众多 图 标 中 ， 我 们 发 现 通 过 调 


整 设计 品牌 特性 更 能 抓 住 用 户 的 眼球 ， 如 图 2-376 所 示 。 
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图 2-376 品牌 特性 更 能 抓 住 用 户 的 眼球 
@ 国 测试 预览 图 标 ， 通 过 微调 达到 最 佳 效果 
在 完成 一 个 图 标的 制作 后 ， 测 试 在 各 种 颜色 的 壁纸 上 的 显示 效果 ， 以 及 将 图 标 放 在 文 


件 夹 中 的 效果 。 最 后 ， 在 用 户 的 设备 上 图 标 会 以 不 同 尺 寸 出 现 ， 例 如 在 应 用 市 场 中 ， 图 标 
的 尺寸 最 大 ， 而 在 桌面 上 图 标的 尺寸 会 缩小 ， 
图 标 在 所 有 尺寸 下 看 上 去 都 很 舒服 。 
《网 多 场景 测试 ， 保 证 图 标的 上 线 质 量 
APP 的 应 用 市 场 有 很 多 ， 这 意味 着 图 标的 应 用 环境 有 多 种 ， 因 此 在 图 标 上 线 前 设计 师 
需要 在 多 种 图 标的 应 用 场景 中 进行 设计 测试 ， 尽 可 能 做 到 在 多 种 场景 下 ， 在 搜索 同类 产品 
的 界面 中 图 标 都 能 吸引 用 户 的 眼球 。 


在 通知 栏 中 图 标的 尺寸 最 小 ， 因 此 需要 确保 
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a 


在 进行 按钮 设计 之 前 ， 需 要 了 解 APP U| 界面 中 按钮 的 相关 基 
础 知识 。 


按钮 设计 基础 


ED RT 


我 们 都 知道 小 按钮 比 大 按钮 更 难以 操 探 ， 因 此 在 设计 APP 界面 时 一 般 都 会 将 可 点 击 
目标 的 尺寸 做 大 一 点 ， 以 利于 用 户 点 击 。 但 是 ，APP 按钮 应 该 设计 为 多 大 尺寸 呢 ? 
先 来 看 一 下 各 平台 设计 指导 规 沁 。 





@ 《iPhone 人 机 界面 设计 规范 》: 最 小 的 点 击 目标 尺寸 是 44X44 px。 
@ 4Windows 手机 用 户 界面 设计 和 交互 指南 》: 建议 使 用 的 尺寸 为 34X34 px， 





最 小 26 X26 px。 
© 《诺基亚 开发 指南 》: 目标 尺寸 应 该 不 小 于 lcmX lcm 或 者 28 X28 px。 





上 面 这 些 指导 规范 给 我 们 列举 了 各 平台 下 可 点 击 目标 的 尺寸 标准 ， 但 是 彼此 的 标准 并 
A 

我 们 知道 目标 的 尺寸 过 小 还 会 导致 失误 的 触摸 操作 ， 尺 寸 小 ， 按 钮 容易 拥挤 在 一 起 ， 
用 户 点 击 时 容易 触 碰 到 附近 的 按钮 ， 导 致 运行 结果 非 用 户 所 愿 。 

大 尺寸 按钮 定位 更 快 ， 拖 移 也 更 方便 ， 操 作 的 舒适 感 更 好 。 手 指 大 小 的 目标 尺寸 最 理 
想 ， 一 般 以 食指 和 拇指 为 主 。 食 指点 击 目 标尺 寸 是 44 x 44 px， 拇 指 是 72 x 72 px。 但 也 
有 特殊 情况 。 移 动 设 备 的 空间 有 限 ， 这 就 意味 着 如 果 每 个 目标 的 大 小 都 很 大 ， 那 么 屏幕 空 
间 根 本 不 够 ， 就 需要 不 断 翻 页 ， 这 在 体验 上 会 变 得 很 糟糕 。 
另外 ， 当 我 们 无 法 推测 用 户 使 用 应 用 时 是 用 食 


日 < 一 Wn | 人 
提示 : 如 有 果 按钮 的 实际 尺寸 为 


52 x 32 px， 在 导出 按钮 时 我 们 可 以 将 指 操作 更 多 ? 还 是 用 拇指 更 多 ?因此 ， 针 对 这 一 扣 
"我 们 需要 非常 细致 的 调研 ， 然 后 设置 合理 的 目标 尺 
格式 为 PNG 的 迁 明 背景 图 标 ， 这 样 加 了 选 Wh | I 出 
明 区 域 使 得 点 击 的 范围 变 大 ， 点 击 起 来 也 寸 。 通 过 调整 目标 尺寸 的 大 小 ， 结 合 实际 的 应 用 情 
证 | | 况 ， 能 够 有 效 地 提高 移动 端的 适用 性 ， 同 时 提高 用 





户 体 验 。 


CC 有 没 钮 的 形态 

在 进行 按钮 设计 之 前 我 们 先 了 解 按 钮 的 形态 。 

0 按钮 的 外 观 

种 见 的 按钮 有 圆 角 矩形、 和 窍 形 、 乡 等 单 规 形 状 ， 也 有 外 观 独 特 、 个 性 的 按钮 ， 如 
3-1 所 示 。 
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.了 Bruce Wayne 次 









Prev | agree 


| ys < | \ / \ > , 琶 | 
Option 1 Option 2 | 


加 按钮 的 状态 

由 于 按钮 是 用 户 执 行 某 个 操作 时 所 要 接触 的 对 象 ， 因 此 在 操作 中 一 定 要 有 所 反馈 让 
用 户 明白 发 生 了 什么 ， 这 就 要 求 在 设计 中 制作 出 按钮 的 几 种 不 同 的 状态 ， 以 表现 用 户 在 使 
用 按钮 的 过 程 中 所 呈现 出 来 的 不 同 显示 效果 。APP 常规 按钮 有 默认 、 上 点击 、 不 能 点 击 三 种 
全 区 史 芝 区 册 直 坷 








图 3-1 按钮 的 不 同 外 观 











默认 Button |! Button | 
Le 和 
We 
点 击 : Button | Button 坟 ) | 凌 | 
dd 
0 
l A 
不 能 点 击 | Button ( Button ) 《人 基 ) 


图 3-2 按钮 的 三 种 状态 
在 按钮 的 设计 过 程 中 ， 在 确保 按钮 外 观 不 变 的 前 提 下 可 以 通过 阴影 、 渐 变 、 发 光 等 特 
效 来 呈现 不 同 的 状态 。 


(CE 有 按 钥 设 计 法 巧 
按钮 设计 的 好 坏 决定 了 APP 的 细节 ， 下 面 介 绍 按钮 设计 的 技巧 。 


《网 善 用 阴影 
阴影 能 产生 视觉 对 比 ， 可 以 引导 用 户 看 更 加 明亮 的 地 方 ， 如 图 3-3 所 示 。 








3-3 善 用 阴影 
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一- 


国 圆 角 边 界 








圆 角 作为 边界 既 可 以 清晰 明显 地 区 分 ， 又 不 会 wr re 
像 直 角 那 样 生硬 ， 如 图 3-4 所 示 。 PS 
@ 鳃 表达 明确 本 


人 
提示 按钮 ， 在 用 户 拿 定 主意 后 只 需 点 击 即 可 。 


@ 层级 关系 


图 3-4 圆 角 边 界 
将 没有 关联 的 按钮 拉 开 一 定 的 距离 ， 既 可 以 比较 好 地 区 分 ， 又 可 以 体现 出 层级 关系 。 


wy Yes No ww Yes No 


(的 关联 分 组 
将 有 关联 的 按钮 放 在 一 起 ， 做 到 视觉 统一 
(的 强调 重点 


应 用 程序 界面 中 要 强调 的 链接 一 般 会 以 按钮 的 形 陈 表现 ， 按 钮 根据 重要 与 否 分 为 以 下 
儿 种 。 





重要 按钮 : 在 整个 界面 当中 比较 大 ， 位 于 醒目 的 位 置 ， 通 常 指 执行 重要 操作 以 
及 吸附 在 确 部 的 按钮 ， 例 如 下 单 、 搜 索 、 确 定 、 提 区 等 操作 。 
一 段 按钮 : 不 是 特别 重要 操作 的 按钮 ， 例 如 清空 、 退 出 、 说 明 性 的 按钮 ， 重 要 





按钮 和 一 般 按钮 都 是 文字 在 按钮 上 ， 而 且 占 的 面积 比较 大 。 
软弱 按钮 : 这 里 指 优先 级 最 低 的 一 种 按钮 ， 这 类 按钮 主要 是 文字 和 图 标 一 起 搭 
配 出 现 的， 例如 汉 选 、 排 序 等 按钮 。 





按钮 的 重要 性 表现 形式 如 下 。 


© 区 别 于 周边 的 硕 色 : 按钮 的 颜色 区 别 于 周边 的 环境 色 ， 一 般 使 用 更 亮 、 高 对 比 
度 的 颜色 ， 如 图 3-5 所 示 。 





current call 


[i 
12:23 Kate Upton 


3-5 区 别 于 周边 的 颜色 





© 利用 和 人 符号、 图标 : 使 用 符号 、 图 标 比 文字 描述 更 直观 ， 且 更 能 吸引 眼球 ， 如 箭 
头 、 对 义 、 叉 等 ， 如 图 3-6 所 示 。 





图 3-6 利用 符号 、 图 标 





不 同 质感 与 纹理 按钮 


wl 下 面 介绍 不 同 质感 与 纹理 按钮 的 制作 ， 帮 助 读者 学 习 使 用 
= 衬 | ”Photoshop 制作 不 同 质感 的 按钮 。 


03.2 


水 晶 一 般 晶 莹 剔透 ， 呈 透明 或 半 透 明 状 ， 折 射 率 高 ， 有 有 光泽。 水晶 质感 的 按钮 一 般 用 
于 游戏 APP 中 。 

侈 设计 思路 

本 实例 制作 的 是 水 晶 质感 按钮 ， 通 过 使 用 图 层 样式 与 图 层 的 混合 模式 实现 水 晶 晶 莹 吻 
透 的 效果 ， 图 3-7 所 示 为 制作 流程 图 。 








图 3-7 制作 流程 图 
团 制作 步 又 


下 面 介绍 水 晶 质 感 按钮 的 绘制 。 
使 用 “ 圆 角 矩形 工具 ”绘制 一 个 边 角 半 径 为 28 px 的 圆 角 和 窍 形 ， 如 图 3-8 所 示 。 


() | 然后 为 图 层 添 加 “和 斜面 和 浮雕 ”“ 摘 边 ” 样 式 ， 如 图 3-9 所 示 。 








斜面 和 浮雕 撕 边 
样式 (MD): 内 斜面 ~ 大 小 3): (一 3 像素 
方法 (Q): 雕刻 清晰 位 置 (P); 外 部 “~ 





回 阅兵 本 属性 





























































































































: |256 像 素 | 9 H: |94 像 素 | 深度 D): 一 一 一 511 % 
: |172 像素 ¥: 方向 @ 上 下 混合 模式 (6): 正常 ” 
pe 大 小 D: A 二 2 像素 不 透明 度 (0): py 100 % 
= 软化 PIG 0 像素 
4 EE EE = 一 填充 类 型 fF) 新 变 ~ 
28 像 素 28 像 素 28 像 素 28 像 素 角度 NW): 、90 度 浪 交 : 加 本 |v|] 辐 反 向 (R) 
回 |28 乔 素 ”| |28 像素 | 。 ) 回 使 用 全 局 光 (G) 
言 度 “一 0 ” 度 样式 (D): 线性 Y” 国 与 图 层 对 齐 (G) 
口 下 光泽 等 高 续 | 4- 口 潮 蚀 上 角度 (A): 人 | 5 度 仿 色 
高 光 模式 H): 源 色 ~ 国 国 i 
缩放 (CO): = 10 % 
四 不 透明 度 (0): = 80  % 














阴影 模式 (A): 正片 县 底 ~ 国 国 [ 设置 为 默认 值 | | 复位 为 默认 值 | 


不 透明 度 (QO: 2 90 % 























图 3-8 绘制 圆 角 和 矩 形 3-9 添加 图 层 样式 


0Q2 添加 “内 阴影 ”图 层 样 式 ， 然 后 单 击 等 蜗 线 ， 在 打开 的 对 话 框 中 调整 曲线 。 继 
续 添 加 “内 发 光 ”“ 光 痒 ”“ 渐 变 ”“ 投 影 ” 图 层 样式 ， 如 图 3-10 所 示 。 




























































































内 阴影 We Ee [- a 
结构 预 设 (P): 自 定 [Ee CE 
PT 混合 式 介 ): 3 Db 
瘟 合 模式 (6)， 芭 加 - Rn 不 透明 度 O): 一 7 了 一 75 % 
不 透明 度 (o)， 人 % i (| 
角度 (A): | | ) 90 ” 度 回合 用 全 局 光 (G) EE 于 © 
距离 D): 人 0 像素 一 
阻塞 (C): 3 14 wo 0 Eo v 
大 小 9): < 10 像素 源 : 加 居中 日 晤 边 各 (G) 
[EW . De um 阴 究 QO: 4 一 0  % 
一 品质 一 大 小 5): 一 100 ”像素 
等 高 线 : | 加 | 消除 锯 占 人) 品质 
杂 色 N): 于 0 1% 等 高 线 : [A 加 Be 
= - 范围 R): 一 50 % 
[设置 为 默认 值 | | 夏 位 为 默认 值 or 





















































oe 混合 模式 (0): 正常 ~ 器 仿 色 结构 
混合 模式 (8) 要 加 不 透明 度 P) 一 zy 100  % , 
不 透明 度 (O): 0 21 新 变 : [| 同 反 向 (R) 人 正片 亚 底 了 | 国 到 | 
[RN 国 Hi A 
角度 Wi( 一 瑟 。 度 样式 (线性 ~” 回 与 图 层 对齐 不 
Ee le ] 角度 MW: (上 | 8 度 角度 (A): | | ) 50 。” 度 回 使 用 全 局 光 (G) 
|S ge | 103 ”4 ”4 
sas:| | Sd 纺 放 6 一 人 10 % 距 高 D):， 一 一 11 像素 
二 一 设置 为 默认 值 | [下 位 X 以 值 扩展 R): G "0 % 
| 设置 为 默认 值 _」 | 复位 为 默认 值 | | 大 小 (S): ee 15 像素 























3-10 添加 图 层 样 式 


() 3 执行 确定 操作 后 (4 新 建 图 层 ， 使 用 () 站 设置 混合 模式 为 

图 像 效 果 如 图 柔 边 画笔 绘制 如 se wa 

3-11 所 示 。 图 3-12 所 示 的 效果 。 透明 度 为 85%， 效 果 如 图 
3-13 所 示 。 





| ep 


图 3-11 图 像 效 果 图 3-12 绘制 效果 图 3-13 设置 效果 
() 0O 按 Ctrl+J 组 合 键 复制 图 层 ， () i 添加 素材 图 片 ， 如 图 3-15 所 
设置 混合 模式 为 “ 铸 加 ”、 着 有 | 
不 透明 度 为 53%， 如 图 3-14 所 示 。 
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PT 








3-14 设置 混合 模式 与 不 透明 度 3-15 添加 素材 图 片 


设置 混合 模式 为 “采光 ”、 不 透 09 使 用 绘图 工具 绘制 图 形 ， 如 图 








图 3-16 设置 后 的 效果 图 3-17 绘制 图 形 
| () 设置 混合 模式 为 “和 准 加 中 不 透 在 边界 上 绘制 高 光 ， 如 图 3-19 - 
明度 为 13%, 效果 如 图 3-18 所 示 。 所 示 。 


3 
和 加 本 本 攻 基 本 也 和 和 和 和 训 吉 了 抽 和 和 和 


和 


Febereettt 


Cresrciarce 


Pr 
站 








图 3-18 效果 3-19 绘制 高 光 
用 同样 的 方法 在 其 他 儿 处 绘制 高 层 混合 模式 为 “ 登 加 ”、 





汉 , 绘制 的 图 形 如 图 3-20 所 示 。 \ 透 明度 为 13%, 如 图 3-21 所 示 。 


和 





[和 
下 

















图 3-20 绘制 图 形 图 3-21 设置 混合 模式 与 不 透明 度 
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photoshop 创意 者 pp。 元 素 设 计 从 入 门 到 精通 








14 坝 置 后 的 图 像 效 未 如 图 3- 22 | 站 使 用 “ 横 排 文字 工具 ”输入 文 
所 示 。 


字 ， 如 图 3-23 所 示 。 





3-22 设置 图 像 效果 3-23 输入 文字 


] O 为 文字 添加 “内 阴影 ”“ 投 影 ” 图 层 样 式 ， 如 图 3-24 所 示 。 





结构 
混合 模式 (6): 正片 亚 底 ~ 国 国 混合 模式 (E): 正常 ~ 
不 重用 度 提 ) ”75 %% 不 透明 度 (0): 一 64  % 


角度 (): | we | 8 度 回 使 用 全 局 (6) 角度 内: (I 有 6 度 回 使 用 全 局 光 人 
ww 


2 


中 高 (D): 一 一 一 1 像素 距离 (D): 2 1 怪 率 
阻塞 (0): 全 0 中 扩展 QR): /一生 0 号 
太 小 8): 一 2 翼 索 大小 (5): 一 > 1 者 素 














图 3-24 添加 图 层 样式 


] 由 单 击 “ 确 定 ” 按 钮 后 的 效果 如 图 3-25 所 示 。 





3-25 完成 效果 


下 到 底层 质 语 


金属 对 可 见 光 反射 强烈 ， 具 有 金属 光泽 ， 除 少数 具有 特殊 颜色 ， 一 般 金 属 都 是 银白 色 
的 。 金 属 质感 的 设计 大 家 在 APP 中 经 常会 见 到 ， 在 按钮 和 图 标 中 用 的 最 多 。 


傅 设计 思路 
本 实例 制作 金属 质感 的 按钮 ， 通 过 洪 加 “渐变 车 加 ”图 层 样式 实现 金属 质感 ， 图 3-26 
所 示 为 制作 流程 图 。 


120 











[区 制作 步骤 


图 3-26 制作 流程 图 


下 面 介 绍 金属 质感 按钮 的 制作 步骤 。 


() 为 图 层 添加 “内 阴影 ” 
如 图 3-28 所 示 。 


Ol sm mm 


Se Zr 





3-27 绘制 圆 角 算 形 





内 阴影 
结构 
混合 模式 (6): 正常 
不 透明 度 (D): 


角度 (A): 





大 小 (5): 


距离 0): 一 一 
阻塞 (0: 于 -一 


» 100 


~ 国 国 


使 用 全 局 光 (G) 





3-28 添加 图 层 样 式 


“内 发 光 ” 图 层 样 式 ， 


结构 


混合 模式 (6): 
不 通明 度 (O): 
杂 色 Wi: < 


> : 柔和 
源 :加 居中 全 回 边缘 (G) 
0 
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0U 3 继续 为 图 层 添加 “ 闫 色 闪 加 ”渐变 车 加 ”和 “投影 ”图 层 样 式 , 如 图 3-29 所 示 。 





颜色 亚 加 
颜色 
混合 模式 (6): 明度 ~ 国 国 
不 透明 度 (D): 一 二 70 wo 





| 设置 为 默认 值 | | 复位 为 默认 值 | 








渐变 到 加 
渐变 
混合 模式 (0O): 正常 


了 J 加 仿 色 


不 透明度): 一 一 一 
新 [ED 口 反问 人 ) 


样式 (): 线性 
角度 (N): | * | 90 度 
缩放 (5): 


”时 与 图 层 对 齐 人 0 


100 % 





设置 为 默认 值 |、 夏 位 为 默认 值 | 


投影 
结构 








混合 模式 (6): 
不 透明 度 (O): 
前 度 (A): 
距离 (D): 有 


扩展 (R): < 
大 小 (5S): EE 


40 oo 
度 站 | 使 用 全 局 光 (G) 
=- 像素 


- 像素 








3-29 添加 图 层 样式 


然后 设置 图 


(4 ee “人 确定” 按钮 ， 
层 的 填充 为 0%， 效 果 如 图 3-30 


所 未 。 


Uo 


使 用 “ 顶 圆 工具 ”绘制 正 圆 ， 
如 图 3-31 所 示 。 





3-30 图 像 效 果 


3-31 绘制 正 圆 


和 photoshop 创意 @ pp ”元 素 设计 从 入 门 到 精通 
ET A 
() Ob 为 图 层 添加 “ 描 边 ”“ 内 发光”“ 渐 变 苔 加 ”和 “投影 了 ?4 种 样式 , 如 图 3-32 所 示 。 











摘 贡 内 发 光 




















结构 
结 攀 混合 模式 (6) 到 加 
不 通明 度 (0); 二 
太 小 (5S): th 过 像素 杂 色 (N): 。 0  % 
ja 加 6 [| 
位 置 (P): 四 部 = 
图 素 
赣 合 模式 介 ): 正常 ™ 方法 (Q): 柔和 ~ 
源 :加 居中 日 ”加 边缘 (9) 
二 适 明 度 (Q): 00 号 阻塞 (0: 0 % 
大 小 (5): 5 2 像素 
填充 类 型 (F); 前 吧 ”= 品质 


等 高 线 : [4 | 清 逐 据 具 人) 
前 名: 国 辆 范围 R): - ce 


拌 动 ): G 











| 设置 为 默认 值 | | 复位 为 默认 值 | 





渐变 亚 加 


渐变 


混合 模式 (0):， 正常 | | 
不 活 明 度 (P): 一 7 一 一 混合 模式 6):， 正片 亚 底 ~ 图 国 


源 豪 : 反 向 (R) 不 垣 明度 (O): 本 75 % 


样式 (): 角度 ~ 团 与 图 层 对 齐 (1) A 和 
前 度 (A): | ”| 120 ” 度 贺 使 用 全 局 兴 (6) 
前 度 (N): | 。 “pr 
缩放 6): 一 一 一 ?J 了 一 一 % 了 6 高 0): 矶 4 像 吉 
1 a 
[设置 为 默认 值 ] [ 复位 为 默认 值 ] i 时 四 
友 小 全 j: 6 恤 妻 








|! | 





图 3-32 添加 图 层 样式 
QO7 执行 确定 操作 后 的 图 像 效 果 () 选择 图 层 ， 单 击 鼠 标 右 键 ， 
如 图 3-33 所 示 。 执行 “转换 为 智能 对 象 ”命令 ， 
如 图 3-34 所 示 , 将 其 转换 为 贸 能 对 象 。 


复制 CSS 
复制 图 层 , 


袖 格 化 图 后 
栅 格 化 图 层 样 式 





3-33 图 像 效 果 3-34 执行 “转换 为 智能 对 象 ” 命 令 


ye ly B 32 6 Es 29 6 BR 加 29 命 今 ， 
提示 。 转换 为 知 能 对 象 U9 wl i | i | | 加 杂 色 ”命令 
后 可 以 双击 智能 对 象 并 强 出 “ 深 加 杂 人 色 ” 对 话 框 ， 倪 叫 Wl 旦 介 |! 如 图 
进行 修改 ， 修 改 完 毕 需 要 存储 plph 所 示 ， 单 击 “确定 ” 按钮 关闭 对 话 框 。 
后 才能 对 原文 件 生效 。 


ER 使 用 “椭圆 工具 ”在 左 、 右 两 侧 绘制 两 个 不 同 颜 
| READMORE 
| 0 色 的 正 圆 ， 如 图 3-36 所 示 。 











B22 





回 巴 上 蜗 (p) 


数 旦 (A): 0 
号 布 

说 平均 宛 布 (U) 

各 高 斯 分 布 (6) 


单 色 (M) 


| El ee 1 Br Nt 


笠 面 和 浮雕 
结构 


图 3-35 添加 杂 色 


样式 (7) 外 侧面 
平滑 


方法 (Q): 
深度 人 D): 
方 [5]: 
大 小 (2): 区 
软化 (FP): 
阴影 


角度 (N): SX |90 度 
* | 加 | 使 用 全 局 光 (G) 
高 度 : 一 30 度 


光泽 等 高 绪 ; | - 消除 锯齿 (L) 
高 光 模 式 (H): 亚 加 

不 透明 度 (O): 和 
阴 景 ;模式 (A): 

不 透明 度 (CO): 


内 阴影 

闫 构 

混合 模式 提 )， 

不 透明 度 (0): 
前 度 (A): ( | 
距离 {0D): 己 1 像素 
阻塞 (C); /5 0 % 
太 小 后 : 上 1 像素 





选择 左 侧 的 正 圆 ， 为 图 层 添加 “斜面 和 浮雕 ”“ 渐 变 琶 加 ”“ 内 阴影 ” 





图 3-36 绘制 


和 “投影 ” 


渐变 到 加 
新 变 

混合 模式 (oj: 
不 透明 度 (P): 
渐变 : 
样 未 (): 

角度 (NW): [ 
纠 所 (5): 


设置 为 默认 值 | | 复位 为 默认 什 


站 | 反 向 (R) 
同 与 图 层 对 齐 人 0 


i100 ke 


混合 模 式 (6)， 季 光 - 国 国 

不 透明 度 [Dj: ， 0 % 
角度 (A): | 50 度 回 使 用 全 局 光 人 
距离 D): 5 5 像素 
扩展 (8): 全 


大 小 图: ， 10 像 表 


[| 


3-37 添加 图 层 样 式 


| 区 





更 筠 BUI Photoshop 创意 


s 因 p 示 未 没 计 从 入 门 到 精通 








| 单 击 “ 确 定 ” 按 钮 后 图 像 效 果 如 图 3-38 所 示 。 选 择 图 层 ， 单 击 鼠 标 右键 ， 执 行 
“ 找 贝 图 层 样式 ”命令 ， 然 后 选择 右 侧 圆 所 在 的 图 层 ， 单 击 鼠 标 右键 ， 执 行 “ 狂 
贴图 层 样 取 ”命令 ， 烙 贴 后 的 效果 如 图 3-39 所 示 。 





图 3-38 图 像 效果 


IE 统 使 质 


纸 盒 表面 光滑 、 平 整 ， 
往 能 带 来 很 强 的 书香 气息 。 
k 肝 设计 思路 
本 实例 绘制 纸 盒 质 
为 制作 流程 图 。 


感 的 按钮 ， 


呈 黄 褐色 ， 有 一 定 的 厚度 


过 阴影 、 颜 色 表 现 纸 使 的 厚 





图 3-39 粘贴 图 层 样 式 效 果 





遮光 性 好 ， 使 用 纸 盒 质 感 的 设计 往 


昌 度 与 质感 ， 图 3-40 所 示 





四 制作 步骤 

下 面 介 绍 纸 盒 质 

O01 新 建 空白 文档 ， 选 择 

A | 

填充 颜色 为 #c79d6a, 绘制 矩形 ， 
如 图 3-41 所 示 。 





图 3-41 绘制 矩形 


感 的 制作 步骤 。 


0 





图 3-40 制作 流程 图 


内 发 光 
结构 
混合 模式 (6): 正片 又 底 ~ 
不 透明 度 (D): 可 
杂 色 人 N): 人 
5 国 
图 素 
方法 (Q): 柔和 ~ 
源 : 回 居中 全 边缘 (G) 
阻塞 (0): 5 
大 小 (5): G 














为 图 层 添 加 “内 及 光 ”和 “渐变 登 加 ”图 
层 样 式 ， 如 图 3-42 所 示 。 





源 变 有 加 
渐变 
混合 模式 (0): 正常 ~ 癌 仿 色 
不 透明 度 p)，< 0 
六 朗 : | 门 反 向 () 
样式 (): 线性 ~ 加 与 图 层 对 齐 人 
角度 :( /1) 50 ” 度 


缩放 (S): < - em 100  % 





| 设置 为 默认 值 | | 复位 为 默认 值 | 











图 3-42 添加 图 层 样 式 





单 击 “ 确 定 ” 按 钮 后 的 图 像 效 使 用 “ 圆 角 矩形 工具 ”绘制 圆 
果 如 图 3-43 所 示 。 A 


图 3-43 图 像 效 果 图 3-44 绘制 圆 角 和 矩形 





E 押 2 


(0) 为 图 层 添 加 re “内 阴影 "”“ 光 泽 ”“ 渐 变 共 加 ”和 “投影 ”图 层 样 式 ， 





































































































斜面 和 浮 央 一 内 阴影 光泽 
和 结构 _ 结构 
样式 :外 镍 面 。 WEST EE 
方 法 Qj: 下 时 。” 汪 合 “上 一 混合 模式 (6): 到 加 ~ 国 国 
深度 D): < 100 % 不 透明 度 (0): sn” 60  % HP rm 
本 角度 (A): (| 50。 度 问 使 用 全 局 光 (G) pe 
大 小 D: 一 8。 像素 人 角度 (N): ( 一 | 0 度 
软化 PD): 一 10 ”像素 距离 0O): /一 2 像素 “A 
阴影 阻塞 (0: CS 0 % 距离 O): Cr 4 像素 
前 度 (N): A 90 度 大 小 (S): 一 一 2 | 像素 本 一 
a « i ee 大 小 (S): ee 像素 
| | [A Ea 
光泽 等 高 线 : PE 团 消 锯 上 中 ee [而 ee 同 反 相 QD 
高 光 模 式 (H): 到 四 国 国 本 A - - -一 
阴影 模式 (9): 杰 加 ~ 国 














新 变 到 加 
新 变 
混合 模式 (0): 要 加 ~ 癌 信 色 
不 透明度 P): qT 一 一 0 % 

新 变 ; [ “|v| 回应 抽 8) 


样式 (LD): 线性 ~ 加 与 图 层 对 齐 问 





混合 模式 @@)， 未 光 -mm 

趟 征明 度 介 ): 60 明 
前 度 (A): (D5 30 ” 度 辣 司 用 全 局 泊 (6) 
中 离 D: AP 0 像素 
扩展 (R)' /= 0D 加 
大 小 中: 一 = 1 像素 





角度 (N): ( | wm 刁 





吝 置 为 默 训 值 景 位 为 默认 值 




















3-45 添加 图 层 样 式 


() 单 击 “确定 ”按钮 后 的 图 像 效 果 () 人 选择 “直线 工具 ”， 设 置 填 充 颜 色 
如 图 3-46 所 示 。 为 的 55732, 绘制 线条 , 如 图 3-47 所 示 。 





3-46 图 像 效果 3-47 绘制 线条 


5 








() 8 为 图 层 添加 “渐变 二 加 ”和 “投影 ”样式 ， 如 图 3-48 所 示 。 





























一 渐变 县 加 
一 渐变 
混合 模式 (o): 柔 光 ~ 回访 色 
“透明度 (P): 一 2 一 、 
ee 7 Ew 4 
样式 (): 线性 ~ 辐 与 图 层 对 齐 四 不 透明 度 (0): 一 80 
eo Hn 
ee Ve 30 度 用 度 (A): ‘qt 度 站 使用 全 局 光 (6) 
缩放 (9): 二 = 100 % 。 
设置 为 默认 值 | [ 复位 为 默认 值 扩 属 (R): 上 mm 
= 


支 小 (1 0 公 妻 

















图 3-48 添加 图 层 样式 
] 按 住 Alt 键 选择 线条 ， 拖 动 复制 


09 单 击 “确定 ”按钮 后 的 图 像 效果 
多 个 ， 如 图 3-50 所 示 。 





3-49 图 像 效 果 3-50 复制 多 个 


] | 选择 “矩形 工具 ”， 设 置 填充 颜色 为 #7f4f28， 绘 制 抢 形 ， 如 图 3-51 所 示 。 





图 3-51 绘制 矩形 


] 几 为 图 层 评 加 “内 阴影 ”“ 内 及 光 ” 和 “渐变 登 加 ”图 层 样 式 ， 如 图 3-52 所 示 。 



























































一 内 阴影 5 一 渐变 到 加 
结构 ee 新 训 
混合 模式 @): 县 加 ~ 
混合 模式 (8) 柔 光 ~ 国 国 不 透明度 (0): 一 一 10  % 混合 模式 (0): 柔 光 回访 色 
不 透明 度 (D): 100 。 %% ee 0 有 不 透明 度 (P): AR 10  % 
ie “四 “ET Fr | 口 R 
角度 (A): ( |】50 度 器 使 用 全 局 光 (G) i - ee 
\ = 样式 ()， 线性 ” 同 与 图 对齐 的 
距离 {0): [a 像 志 方法 (Q): 柔和 ~ | 全 
阻塞 (CO): So 0 oo 源 :@ 居中 人 日 回 边缘 (G) 角度 (N): \ py 90 度 
pg 阻塞 O: CT 0  % 一 
大 小 (5): ee 8 像素 大 小 8): = 一 277 像素 缩 玫 (56): € ZS » 100 96 












































3-52 添加 图 层 样 式 














] 执行 确定 操作 后 的 图 像 效 果 如 
图 3-53 所 示 。 





3-53 图 像 效 果 


| 为 图 层 添加 “内 发 光 ”“ 内 阴影 ” 


hy 所 示 。 








一 内 发 光 
一 结构 
混合 模式 (8): 又 加 - 








不 透明 度 (0): AT 10  % 
杂 色 从): CPP 0 oo 
o 国 

一 图 素 








方法 (Q): 杀 和 

源 :全 居中 (E) ”加 边 毕 (G) 
阻塞 (0: (二 0 和 
大 小 6): = 27 像素 





























新 变 县 加 
新 变 
混合 模式 (0): 和 柔 光 ~ 回访 色 
不 透明 度 p): 了 % 

世 交 [ER 生 生生 [| [| 反 各 (R) 


样式 (): 线性 团 与 图 层 对 齐 (0 











角度 (1) 0 诬 
闹 关 避让 一 100 人 
设置 汐 靳 让 值 屋 位 为 球 认 值 








]4 使 用 绘图 工具 绘制 图 形 ， 如 


图 3-54 所 示 。 





藻 攀 








一 肉 明 蜡 ; 





混合 模式 (8) 柔 光 ~ 国 国 
不 透明 度 (Dj: = 100  % 


图 3-54 绘制 图 形 


“渐变 合 加 ”和 “投影 ”图 层 样 式 ， 如 图 


角度 (A): (! ) 0 度 回 使 用 全 局 光 (G) 


支 小 人 1: Fe 8 像 志 








一 控 








车 构 


是 ; 





混 吝 模式 (6):。 晋 加 -| | 
不 透明度 (0): 一 一 0 % 
前 度 (A): (1) 90 度 矿 | 合用 全 局 光 避 ) 


大 小 GT 2 像素 





图 3-55 添加 图 层 样 式 


|] pi 使 用 绘图 工具 绘制 其 他 图 形 ， 


| 执行 确定 操作 后 的 图 像 效 来 如 图 
3-56 所 示 ， 找 贝 图 层 样式 备用 。 


如 图 3-57 所 示 。 





图 3-56 图 像 效果 
] 选择 三 个 图 形 所 在 的 图 层 ， 单 
击 足 标 右键 ， 执 行 “ 粘 贴图 层 
样式 ”命令 ， 粘 贴 后 的 效果 如 图 3-58 所 示 。 


图 3-57 绘制 其 他 图 形 


] 9 使 用 绘图 工具 绘制 星 形 ， 如 图 


3-D9 所 示 。 
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3-58 粘贴 图 层 样 式 后 的 效果 





一 斜面 和 浮 央 





一 结构 

样式 们 : 外 任 面 

方法 (Q): 平滑 sx 

深度 D): ”100 
方向 : 图 上 ” 同 下 

大 小 站 To 8 

化 人 jg 10 

















RN 90 度 

\、”/ 口 使 用 全 局 光 (6) 
高 度 “一 30 度 

光泽 等 高 线 : 四 辐 湖 逐 据 齿 () 
高 光 模式 (H): 又 加 -| 
不 透明 度 (D): 一 2 一 一 30  % 
阴影 模式 (A): 杰 加 ~ 加 加 

















设置 为 默认 值 复位 为 默认 值 

















一 渐变 伙 加 





一 新 变 
瘟 合 模式 (0): 垂 加 v 癌 仿 色 
不 透明 度 (P): 一 一 10 oo 


汀 [  ]”| 回 所 om 


样式 (0D): 线性 ”与 图 层 对 齐 人 
角度 09: ! mm 并 
绵 肌 (5): 一 > 一 100 oo 











设置 为 默认 值 复位 为 默认 值 











3-59 绘制 星 形 


几 为 图 层 添加 “和 斜面 和 浮雕 ” 
0 i 
如 图 3-60 所 示 。 


内 阴影 
结构 
混合 模式 提醒 加 "| 


i 





角度 (A): (! ) 0 度 回 司 用 全 局 光 (6) 


阳 蹇 个: 一 0 0 
志 /| (5): = 2 怪 妻 








混合 模式 人 )， 柔 光 | 
角度 (A): | 上 | 0 度 回合 用 全 局 光 (6) 
距离 D): T= 一 一 10 像素 


人 
扩展 (RY): /一 一 0 号 和 
大 小 全 21 像素 











3-60 添加 图 层 样 式 


路 ] 单 击 “确定 ”按钮 完成 按钮 的 制作 ， 如 图 3-61 所 示 。 
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3-61 完成 效果 








IE 发光 效 果 

发 光 效 果 也 是 十 分 常见 的 设计 效果 ， 为 了 表现 发 光 效 果 ， 一 般 按 乌 的 背景 色 为 深 色 ， 
而 发 光 的 颜色 为 鲜艳 的 彩色 ， 对 比 强烈 。 

鸭 设计 思路 

本 实例 制作 的 是 发 光 效 果 的 按钮 ， 主 要 通过 “外 发 光 ” 图 层 样 式 实现 发 光 的 效果 ， 
3-62 所 示 为 制作 流程 图 。 





图 3-62 制作 流程 图 
团 制作 步 了 
下 面 介绍 发 光 按钮 的 制作 步骤 。 


() | 使 用 “椭圆 工具 ”绘制 正 圆 ， 如 图 3-63 所 示 。 然 后 双击 图 层 ， 在 打开 的 “图 层 
样式 ”对 话 框 中 设置 “内 阴影 ”和 “投影 ”样式 ， 如 图 3-64 所 示 。 



























































内 阴影 投影 
混合 模式 (6): 正常 -BN 混合 模式 (6): 正常 = 
不 透明 度 (D): 52 % 不 透明 度 (D): 5 % 
角度 (A): | ， ) 90 ” 度 回 使 用 全 局 光 (G) 角度 (A): | 1 90 ” 度 回 使 用 全 局 光 (G) 
距离 D): 人 一 0 像素 距离 D): ,二 ，1 像素 
阻塞 (QO: < 0 % 扩展 (R): » 100  % 
大 小 (5): & 0 像素 大 小 (S): & | 0 像素 
3-63 绘制 正 圆 3-64 添加 图 层 样式 
() 单 击 “ 确 定 ” 按 钮 后 的 图 像 效 () 复制 图 层 ， 删 除 “ 投 影 ” 样 式 ， 
果 如 图 3-65 所 示 。 并 修改 “内 阴影 ”样式 ， 如 图 
3-66 所 示 。 
内 阴影 
辣 构 
混合 模式 介 ): 正常 ~ 国 国 
不 透明 度 (O): : 78 a6 
角度 :| 上 | 8 度 回 使 用 全 局 光 人 
距离 {0): 档 1 慢 素 
阻塞 (0): (一 0 怠 
太 小 人 各 )， 宇 ”10 像素 











3-65 图 像 效 果 3-66 修改 图 层 样式 
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更 锣 5 UI Photoshop 创 总 里 PP 元素 设计 从 入 1 门 到 精通 
看 鞠 4 是 一 一 一 一 一 一 一 




















0 4 继续 设置 “颜色 闭 加 ”和 “ 渐 渐变 亚 加 
变 壹 加 ”图 层 样式 ， 如 图 3-67 
雪 瘟 言 模式 (OQ): 正常 = 站 | 仿 色 
所 示 。 不 透明 度 (P): 100  % 
渐变 : Er 上 反 向 f) 
产 色 本 加 样式 (线性 ~ ”加 与 图 层 对 齐名 
颜色 
滥 冶 模式 全): 正常 ~ 国 罗 前 度 (N): | | | . ) 30 度 
不 透明 度 {O); 35 % 蚂 衣 上 )， 100 驴 
| 设置 为 默认 值 | | 复位 为 默认 值 | 庆 晤 村 兰 庆 值 | |[ 复位 为 点 认 值 | 

















图 3-67 设置 图 层 样式 


(0) 单 击 “确定 ” 
按钮 后 的 图 像 
如 图 3-68 所 示 。 


O00 sma x 


图 3-69 所 示 。 





图 3-68 图 像 效 果 图 3-69 绘制 图 形 
() 为 图 层 设 置 “ 内 阴影 ”“ 颜 色 登 加 ”“ 渐 变 登 加 ”“ 外 发 光 ” 和 “投影 ”样式 ， 
如 图 3-70 所 示 。 













































































渐变 严 加 
渐变 
混合 模式 (0O): 正常 Md 仿 色 
内 阴影 颜色 到 加 不 透明 度 人 P): 100  % 
结构 颜色 新 变 : 7 反 向 (R) 
混合 模式 (6): 正常 ~ 国 国 二 
不 透明 度 0) 一 万 % 况 合 模式 (6): 正 第 ~ 国 国 样式 (0): 线性 可 与 图 层 对 齐 们 
不 透明 度 (D): 100 % 角度 (N): | ， |) 90 度 
角度 (A): | * | 90 度 三 | 使 用 全 局 光 (9) = 
人 [设置 为 默认 值 】 [ 复位 为 默认 值 | 编 直 (5): 100 国 
明 窜 QO: C0 % | 设置 为 默认 值 | | 复位 为 默认 值 | 
大 小 (3): > 6 像素 
四 避 涝 操 影 
晴 构 千 构 
混合 模式 (E): 源 色 ~ 混合 模式 (68):” 正片 又 底 ~ 国 国 
不 透明 度 (O);: 23 % 不 透明 度 (O): 75 咒 
杂 色 的 : :5 0 吃 了 一 
o 天 i 
图 表 距离 {Di): [地 0D 仅 袁 
Ri 本 0 
方法 (Q): 对 和 ~ 多 — 
扩展 (P): < 0 。% is - 
太 小 (5); 名 7 像素 品质 
品质 等 高 闭 : } "| : [| ;消除 锅 齿 必 ) 
等 高 线 : 回 消除 据 上 伸 杂 色 (N): 上 听 
So EE 
ey 一 本 图 层 控 空 投影 (U) 
I | 设置 为 默 认 值 | | -复位 为 默认 值 | 











3-70 添加 图 层 样 式 
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() 单 击 “确定 ”按钮 
完成 按钮 的 制作 ， 
如 图 3-71 所 示 。 





图 3-71 完成 效果 


D 9 不 同 功 能 控 宕 设计 条 例 


按钮 的 不 同 用 途 决定 了 它 的 形状 ， 除 了 最 多 也 是 最 常见 的 普通 
按钮 外 还 有 很 多 其 他 控件 也 是 由 按钮 控制 的 ， 如 开关 、 滑 块 及 进度 
条 等 。 


项 有 开关 按 记 
开关 按钮 用 于 对 某 个 功能 或 设置 进行 开启 或 关闭 ， 是 APP 界面 中 经 党 用 到 的 控件 。 
《6 凤 开关 的 类 型 
开关 一 共有 复 选 框 、 单 选 按钮 和 ON/OFF 开关 三 种 类 型 ， 如 图 3-72 所 示 。 


WA 
外 


3-72 三 种 开关 类 型 





复 选 框 : 复 选 框 开 关 在 一 组 选项 中 有 多 个 ， 允 许 用 户 选 择 多 个 。 通 过 勾 选 的 方 
式 来 设置 。 适 合 需 要 在 列表 中 设计 多 个 开关 设置 ， 并 能 市 省 空间 的 开关 设计 。 
单 选 按钮 : 单 选 按钮 也 是 一 组 选项 ， 但 只 人 允许 用 户 从 中 选择 一 个 。 适 合 需 要 用 


户 看 到 所 有 可 用 选项 并 排 妓 示 的 开关 设计 。 
ON/OFF 开关 : ON/OFF 开关 只 有 一 个 开局 和 关闭 的 选择 ， 开 关 控 制 它 的 开启 和 
关闭 状态 。 








131 








Photoshop 创意 者 pp。 元素 设 计 从 入 门 到 精通 





国 设计 思路 


本 实例 制作 的 是 ON/OFF 开关 ， 为 了 通 真 显示 开关 的 ; 


下 和 弹 起 两 个 面 ， 图 3-73 所 示 为 制作 流程 图 。 


EE oO EN oO EIE3 


图 3-73 制作 流程 图 
国 制作 步骤 
下 面 介绍 开关 按钮 的 制作 步 又。 





使 用 “ 圆 角 和 窍 形 工具 ”给 





A {ST 0 a A 


制 加 角 和 矩形 ， 在 


ed Sal | 0 l “属性 ”面板 中 设置 参数 ， 如 图 3-74 所 示 。 
02 设置 后 的 矩形 效果 如 图 3-75 所 示 。 


LI=lss | 一: 


| 于 *|| | 加 
15 像 素 15 像 素 15 像 素 15 像 素 
图 图 


器 |15 伪 素 ”||15 像 素 | 口 





图 3-74 设置 参数 












如 图 3-76 所 示 。 


样式 
赣 侣 选项 :加 认 
加 斜面 和 浮 随 


口 颜色 亚 加 











新光 本 i ey a 】 anemia 

口 图 案 到 加 襄 度 ; \_- 度 

-一 光泽 等 高 线 [ 器 清 妆 据点 人 
高 光 模式 (H): 源 色 
不 透明 度 (0): 4 0 %% 
阴影 模式 (A): 正片 到 底 | 
不 透明 度 (C): 六 % 








[设置 为 默认 值 | | 复位 为 默认 值 | 








图 3-76 添加 图 层 样式 


图 3-75 设置 后 的 矩形 


渐变 县 加 - 


渐变 

瘟 合 模式 (0): 正片 县 底 a 
不 透明 度 (p): A 

| 

样式 (): 线性 


角度 N:( | ) 5 度 


缩放 (5): 2 150 

















设置 为 默认 值 复位 为 默认 值 


双击 进入 “图 层 样 式 ” 对 话 框 ， 设 置 “和 斜面 和 译 驹 ”和 “渐变 登 加 ”的 参数 ， 


% 











04 单 击 “ 确 定 ” 按 钮 ， 图 像 如 图 OD 继续 绘制 矩形 , 如 图 3-78 所 示 。 
86 VN 让 外 











图 3-77 图 像 效 果 图 3-78 绘制 矩形 
翌 et UO 轩 图 层 浴 四 让 | 民 冯 川 料 ;Wi 图 
混合 选 项 :点 内 是 村 
笠 面 和 浮 陵 混合 模式 (E): 正常 Md 3—79 所 未 ， 
等 高 绪 不 透明 度 (0): = 59  % 
末 色 人 :0 |% ¢é zz 过 1 
() WM 单 击 “确定 ”按钮 后 的 图 像 如 图 3-80 
ml | 本 所 示 。 
一 方法 Q): 杀 和 v 
扩展 @P): -= 2 |% 
图 案 到 加 品质 
等 高 线 : 拓 开 消 逐 据 点 (0) 
和 范围 R): 一 一 50  % 
拉动 0): (= 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 














图 3-79 添加 “外 发 光 ” 样 式 图 3-80 图 像 效果 加 
() 8 再 次 使 用 “ 圆 角 算 形 工具 ”绘制 圆 角 和 矩形 ， - 
如 图 3-81 所 示 。 








09 在 “属性 ”面板 中 修改 宽 、 高 参数 ， 并 设 
置 圆 角 半 径 ， 如 图 3-82 所 示 。 























[ED 


113 像素 

















图 3-81 绘制 圆 角 矩形 图 3-82 设置 参数 


] (0) 为 该 图 层 添 加 “渐变 夺 加 ”和 “投影 ”图 层 样式 ， 如 图 3-83 所 示 。 




















样式 渐变 要 加 样式 投影 
结 
沪 合 更 硕 泌 议 | 混合 选 页 积 认 
笠 面 和 浮 央 混合 模式 (0): 正常 ” 仿 色 | 笠 面 和 浮 央 混合 模式 (6); 正片 县 底 ” [| 
高 线 不 透明 度 (P): 100 % 等 高 线 不 透明 度 (O): [会 ] 5 % 
纹理 淅 六 本 本 二 二 [| 局 ] 反 向 () 纹理 角度 (A): | ) 120 ” 度 问 使 用 全 局 光 (G) 
PP -: : | 引 | 与 th ep ~ sap 
描 边 | 样式 线性 与 图 层 对 齐 (1) EE et 下 
内 阴影 角度 (N): | 4 ) 90 度 a 扩展 QR): C= 0 % 
口 内 发 光 ee 大 小 (5): FE 5 人 素 
光泽 缩放 人): ZS 100 。 %% 光泽 es 
品质 
站 医生 nie 四 
渐变 严 加 等 高 线 : 消除 锯 频 () 
处 发光 ] 外 发 光 末 色 (N): ， 6 
本 投影 加 图 层 控 空投 影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 

















3-83 添加 图 层 样 式 
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更 辩 gU| Photoshop 创意 A 元 素 设 计 从 入 门 到 精通 
”看 镭 是 一 一 一 一 一 一 


| | 单 击 “ 确 定 ” 按 钮 ， 图 像 如 图 3-84 | 
pa :| 加 OTHH 0 
所 未。 有 = 
| 新 建 图 层 ， 然 后 调整 图 层 顺序 ， 同 下 
移动 两 层 ， 并 设置 该 图 层 的 不 透明 度 Sn 


: 卫 人 @@ 渐变 秋 加 
为 50%， 如 图 3-85 所 示 。 人 投影 
加 只” 圆 前 拭 形 3 t= 
电 效果 
加 外 发 光 
e [了 可， 
@@ 于。 圆 角 拒 形 2 fr 
@ 效果 
人 科 面 和 浮 贿 
@ 渐变 又 加 





























图 3-84 图 像 效果 
] 选择 “画笔 工具 ”， 设 置 颜 色 为 ] 
浅 灰 色 ， 在 右上 和 角 进 行 绘制 ， 如 
图 3-86 所 示 。 


图 3-85 调整 图 层 顺序 与 不 透明 度 
再 次 绘制 圆 角 矩形 ， 并 调整 图 层 
至 最 上 层 ， 如 图 3-87 所 示 。 


“| 





图 3-86 绘制 图 形 图 3-87 绘制 圆 角 算 形 


] 站 为 图 层 添加 “渐变 于 加 ”和 “投影 ”图 层 样式 ， 如 图 3-88 所 示 。 
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样式 0 样式 
混合 选项 : 靶 认 时 混合 选 珊 吉 认 
A 混合 模式 (0): 正常 ~ 回访 色 向 和 和 混合 模式 B): 正片 亚 底 ~ 国 国 
等 高 线 不 透明 度 (p): 100 % | 等 言 线 不 透明 度 (0): 一 了 = 一 一 41 o% 
纹理 渐变 : 一 一 一 = ] 反 向 (R) 纹理 角度 (A): | |】120 ” 度 回 使 用 全 局 光 (G) 
指 边 样式 (LD): 线性 ~ ” 回 与 图 层 对 齐 () | 0 
内 阴影 角度 N: (0 一 度 扩展 R): A 一 0% 
内 发 光 — 大 小 8): 一 一 像素 
光泽 缩放 人): 地 100 % 光泽 : 
颜色 又 加 | | | Ee 
设置 为 默认 值 复位 为 默认 值 可 渐变 有 加 
等 高 线 ; 消除 锯齿 (0) 
图 案 秋 加 二 
图 案 双 加 DE 杂 色 WN): 一 一 % 
外 发 光 辐 图 层 控 空投 时 (J) 
可 投影 [设置 为 默认 值 | | 复位 为 默认 值 | 














图 3-88 添加 图 层 样式 


单 击 “ 人 确定 ”按钮 后 的 图 像 
如 图 3-89 所 示 。 


图 3-89 图 像 效 果 


17 


使 用 “ 横 排 文字 工具 ”输入 
文字 ， 如 图 3-90 所 示 。 


图 3-90 输入 文字 





| 8 为 文字 图 层 添 加 “内 阴影 ”和 “外 发 光 ” 图 层 样 式 ， 如 图 3-91 所 示 。 














- 外 发 光 
样式 内 阴影 样式 结构 
滥 侣 远 贡 显 认 澡 合 寺内 坟 认 国光 
斜面 和 浮 睦 混合 模式 (6): 正片 伙 底 [es 斜面 和 浮 限 洪 色 7 
ni 不 透明 度 (0): 75  % 等 高 线 a sR bs 
纹理 角度 :| ， ) 90 度 同 使 用 全 局 光 (G) 指 边 © | 
2 距离 {D0): 万 5 像素 了 内 阴影 图 过 
ee 阻塞 (0): 4 0 % pe EE 
大 小 (5): 于 5 像素 扩展 P): 一 2 二 34  % 
光泽 颜色 又 加 ye i 
颜色 又 加 品质 渐变 到 加 EC 
渐变 亚 加 等 高 线 : 消除 锯 频 人 0) 图 案 亚 加 品质 
图 案 亚 加 ， ] | 上 湖人 名 
可 外 发 光 人 本 投影 
范围 从 ): 50 % 
投影 | 设置 为 默认 值 | | 复位 为 默认 值 | 拉动 0): A 一 0  % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 














图 3-91 添加 图 层 样 式 


| hea 按钮 ， 图 像 如 图 WIl) 


图 3-93 输入 文字 


再 次 输入 文字 ， 如 图 3-93 所 示 。 





3-92 图 像 效 果 


风 选择 第 一 个 文字 疼 层 ， 单 击 鼠 标 右键 ， 执 行 “ 找 贝 图 层 样 式 ” 命 令 。 然 后 选择 
第 二 个 文字 疼 层 ， 单 击 鼠 标 右 键 ， 执 行 “类 贴 独 层 样 取 ” 命 令 ， 如 图 3-94 所 示 。 


人 上 执行 操作 后 的 效果 如 图 3-95 所 示 。 











撞见 国 层 样 式 





ON OFF | 

















3-94 执行 命令 图 3-95 效果 
2) Wai 使 用 “ 圆 角 矩形 工具 ” Se 
绘制 圆 角 和 矩形 ， 然后 ] i 





怎 制 CSS 


复制 图 层 .… 
按 CtrltT 组 合 键 ， 旋 转 并 斜 切 ee 
罗 1 从 图 层 建立 组 .. 
图 形 ， 如 图 3-96 所 示 。 ee 
人 





0 选择 图 层 ， 单 击 鼠 标 四 
右键 ， 执 行 “转换 为 a 


智能 对 象 ” 命 令 , 如 图 3-97 所 示 。 3-96 旋转 并 斜 切 3-97 转换 为 条 
能 对 象 ”命令 
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更 辩 gU| Photoshop 创意 .Oi 元 素 设 计 从 入 门 到 精通 





9 有 由 央行 村 “ 滤 镜 ?” | “模糊 29 | “高 斯 模糊 29 命 A 在 强 出 的 对 话 框 中 设置 半径 和 值 ， 
如 图 3-98 所 示 。 
o6 调整 贺 角 和 矩形 的 位 置 ， 并 将 图 层 向 下 移动 几 层 ， 如 图 3-99 所 示 。 





高 斯 模糊 


轩 预 此 (P) 


ON OFF | 





日 100% 
半径 (R): 像素 











图 3-98 设置 半径 值 图 3-99 调整 位 置 与 图 层 顺 序 
出 在 “图 层 ” 面 板 中 设置 不 透明 度 为 80%， 如 图 3-100 
所 示 。 








2 “0N” 状态 的 完成 效果 如 图 3-101 所 示 。 将 除 背 景 
以 外 的 所 有 图 层 放 置 在 一 个 组 内 ， 然 后 复制 组 ， 并 
修改 图 层 ， 制 作 按钮 的 “0FF” 状 态 ， 完 成 效果 如 图 3-102 所 示 。 













到 
© 蕊 。 圆 前 矩形 2 fr = | 
1 ON OFF 
时 冬 面 和 ; 浮 腓 
最 渐变 亚 加 -~ 


DO 灰 . 回 人马 . 和 外 同 











图 3-100 设置 不 透明 度 图 3-101 “ON ”状态 完成 效果 图 3-102 “OFF” 状态 完成 效果 


“ 厂 下 滑 块 按 包 


滑 块 按钮 用 于 滑动 设置 相应 的 选项 ， 通 常 以 向 左 或 向 右 滑动 来 设置 两 个 不 同 的 选项 
与 ON/OFF 按钮 的 效果 相同 。 

@ 设计 思路 

本 实例 制作 的 是 滑 块 按钮 ， 通 过 设计 突出 的 滑 块 吸引 用 户 去 点 击 、 滑 动 ， 向 左 或 向 右 
滑动 后 显示 为 颜色 、 文 字 变 化 ， 图 3-103 所 示 为 制作 流程 图 。 


Bo Mo. 


图 3-103 制作 流程 图 

















国 制作 步骤 
下 面 介绍 滑 块 按钮 的 制作 。 


01 


使 用 “ 圆 角 算 形 工具 ”绘制 
角 和 矩形 ， 如 图 3-104 所 示 。 





图 3-104 绘制 圆 角 和 珑 形 


0 


置 参 数 ， 如 图 3-105 所 示 。 


双击 该 图 层 ， 在 弹出 的 对 话 框 
中 选择 “内 阴影 ” 复 选 框 ， 设 
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各 内 阴影 
结构 
虽 合 选项 翼 认 
和 混合 模式 (6): 正片 又 底 ~ 国 国 
等 高 绪 不 透明 度 (D): PS 81 % 
纹理 角度 (A): | ， ) 90 度 同 使 用 全 局 光 (G) 
-一 距离 [): 一 5 像素 
i 阻塞 (0O: 友 8  % 
一 大 小 (3): = 二 全 未 
习 颜色 又 加 品质 
渐变 全 加 | - 消除 据 齿 () 
图 案 到 加 
让 发 光 cd 二 
投影 [设置 为 默认 值 | [ 复位 为 默认 值 | 








图 3-105 设置 “内 阴影 ” 


分 别 充 置 “颜色 侣 加 ”和 “外 发 论 ” 的 参数 ， 如 图 3-106 所 示 。 




















颜色 到 加 样式 en 
5 颜色 酒 冯 二 启 。 Ge 
混合 选项 :默认 混合 模式 (E):， 源 色 本 
A 混合 模式 (6): 正常 ~ 国 国 2 二 
和 让 不 透明 度 (0): D100  % 一 - i = 
- - 二 吕 ; 人 
纹理 [ 设置 为 默认 值 | [ 复位 为 默认 值 | 描 边 
描 边 习 内 阴影 图 素 
习 内 阴影 -一 方法 (Q): 条 和 
内 怪 江 颜色 亚 加 扩展 P): SS 3 % 
光泽 渐变 到 加 大 小 (S): ES 5 像素 
图 案 要 加 品质 
新 变 权 加 一 #8:| S| Csi 
图 案 亚 加 - 范围 R): = 50  % 
可 外 发 光 抖动 O): 0 % 
返 影 [设置 为 默认 入 | [ 在 位 为 默认 值 | 











3-106 设置 “颜色 又 加 ”、 


()4 设置 后 的 图 像 效 末 如 图 3-107 
所 示 。 











“外 发 光 ” 的 参数 


0 


再 次 绘制 一 个 矩形 ， 并 调整 图 
层 到 下 一 层 ， 如 图 3-108 所 示 。 





3-107 图 像 效果 3-108 绘制 矩形 并 调整 顺序 


同样 为 该 图 层 设 置 图 层 样 式 ， 如 图 3-109 所 示 ， 对 于 渐变 于 加 的 颜色 ， 色 标 1 
为 #737373、 色 标 2 为 #clclcl。 
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Ta 


| 意 戎 pp 元 素 设 计 从 入 门 到 精通 








样式 
混合 选项 :默认 
口 斜面 和 浮雕 
口 | 等 高 绪 
器 纹理 
习 内 阴影 
回 内 发 光 
回 光泽 
器 颜色 亚 加 
回 渐变 到 加 
加 图 案 到 加 
回 外 发 光 


加 投影 





摘 边 

结构 
大 小 人 :人 像素 
位 置 p): 外 部 ~ 

瘟 合 模式 (6): 正片 亚 底 

不 透明 度 (O): 5 38 % 

填充 类 型 FF): 颜色 ~ 

产 色 : 国 国 


设置 为 默认 值 和 夏 位 为 默认 值 


























各 内 阴影 
结构 
混合 选项 积 认 
人 混合 模式 (6): 正片 亚 底 ” 国 国 
加 等 间 线 不 透明 度 (0): 25 22  % 
可 纹理 角度 (A): | 上 | | 90 一度 问 使 用 全 局 光 (G) 
di 一 
a 阻塞 CC): = 去 15  % 
= -一 大 小 G): = 32 ”像素 
口 颜色 到 加 品质 
局 渐变 亚 加 各 二 :| - 问 消除 锯齿 人 
| 图 案 妥 加 
可 外 发 光 i i 
口 投影 | 设置 为 默认 值 | | 复位 为 默认 值 | 














样式 

混合 选项 :默认 

口 斜面 和 浮雕 
口 等 高 线 
癌 纹理 

司 描 边 

可 内 阴影 

口 内 发 光 

回 光泽 

了 颜色 到 加 

了 图 案 琶 加 

习 外 发 光 

| 投影 























渐变 严 加 样式 
渐变 赣 合 选项 :默认 
混合 模式 (D): 正常 v | | 仿 色 辣 科 面 和 学 史 
不 透明 度 (P): 2 100 % 回 一 
MK | Kt ts 
样式 (0): 径 向 Y” 导 与 图 层 对 齐 (1) 园 内 阴影 
‘A 口内 发 光 
前 度 (N): | Wy 90 度 = 
缩放 (5): ZS 94  % 回 颜色 又 加 
回 靳 变 颁 加 
| 设置 为 默认 值 _| | 复位 为 默认 值 | 口 图 案 到 加 
口 投影 





外 点 光 
结构 
混合 模式 (E): 正常 


bd 














不 透明 度 (0): ez 86 % 
末 色 (N): G 0 % 
a 国 - 
图 素 
方法 (Q@): 杀 和 
扩展 (P): 4 0 % 
大 小 (5): 里 5 像素 
品质 
和 | - 癌 ] 消除 锯 上 (0) 
范围 (R): ZS 50  % 
抖动 0): 3 0 % 








| 设置 为 默认 值 “| | 复位 为 默认 值 | 
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图 3-109 设置 图 层 样式 


单 击 “确定 ”按钮 后 的 图 像 
如 图 3-110 所 示 。 


效果 UN 


绘制 定形 ， 并 调整 至 最 上 层 ， 如 
图 3-111 所 示 。 








样式 

北 合 选项 :加 从 

笠 面 和 浮 睦 
| 等 高 线 

口 纹理 

口 描 边 





图 3-110 图 像 效果 


双击 儿 层 深 加 图 层 样式 ， 如 图 3-112 所 示 。 














! 衬 
到 混合 选项 积 认 
混合 模式 (D): 正常 v 器 仿 色 可 任 面 和 浮 央 
不 透明 度 (P): 5 64  % 器 等 高 线 
新 变 : 癌 反 向 R) NE 
一 口 描 边 
8 和 | vv 只 | 与 = We 
样式 (0): 线性 与 图 层 对 齐 (D) 口 内 阴影 
角度 :| ， ) -90 度 ] 内 发 光 
a 口 光泽 
缩放 人): 99 % 癌 颜色 到 加 
局 靳 变 伙 加 
设置 为 默认 值 | | 复位 为 默认 值 | 门 图 案 到 加 
口外 发 光 








图 3-111 绘制 矩形 




















报 融 
结构 
混合 模式 (6) 正片 到 底 ~ 加 加 
不 透明 度 (D): ZS 65 % 
角度 :AN 120 ” 度 园 使 用 全 局 光 (G) 
距 高 D): 本 5 像素 
扩展 RR): = 15 % 
大 小 (5): < 10 像素 
品质 
党 线 | - | 消除 锯齿 () 
杂 色 人 N): G 0 %% 
同 图 层 控 空投 影 (U) 





| 设置 为 默认 值 | | 复位 为 默认 值 | 
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3-112 添加 图 层 样式 








] 复制 一 个 图 层 ， 将 其 同上 移动 ] 双击 图 层 ， 在 弹出 的 对 话 框 中 
[2 ox A I I ye 选择 “渐变 合 加 ”图 层 样式 ， 
设置 参数 ， 如 图 3-114 所 示 。 























和 二 新 变 权 加 
济 舍 渤 硕 沁 计 0 
i 混合 模式 (0): 正常 ~ 回 仿 色 
等 高 线 不 透明 度 (p); rg ° 100 596 
纹理 渐变 : [El ~] 团 反 向 (R) 
指 边 样式 (): 线性 ~ 同 与 图 层 对 齐 (0 
由 阴影 角度 (VY): | * ] 90 度 
内 发 光 。 
光泽 缩放 (G)， = 69 % 
二 [ 屋 本 为 承认 值 | [ 复位 为 默认 值 ] 
有 Vv 
se 图 案 亚 加 
外 发 光 
投影 
图 3-113 复制 并 移动 图 3-114 添加 “渐变 又 加 ”图 层 样式 





四 





入 女 而 | 视图 (V 音 口 (W) 帮助 (H) 
形状 模 构 Ctrl+F 


转 拘 为 智能 读 演 (9) 








] 风 复制 一 层 , 执行 “ 滤 镜 ”| “模糊 ”| “ 方 
SS 框 模糊 ”命令 ， 如 图 3-115 所 示 。 
pa ei ed 





锐 头 校正 (R).. Shift+Ctrl+R 


液化 (DD).. Shift+Ctrl+X 如 图 Sl G 所 No 
油画 (O) 
港 失 点 (V).. Alt+Ctrl+V 








Adobe Photoshop CC 


全 此 形状 图 层 必须 经 过 栅 格 化 才能 处 理 。 是 天 要 栅 格 化 此 形状 ? 





确定 [ 取消 | 








3-116 单 击 “ 确 定 ” 按 钮 


14 在 弹出 的 对 话 框 中 设置 参数 ， 如 图 
3-117 所 示 。 

一 下 一 ] 品 单 击 “ 确 定 ” 按 钮 后 使 用 方 癌 键 略 

MP) 人 微 回 下 移动 ， 图 像 效 果 如 图 3-118 

所 示 。 





圆 100930 


半径 [R): 1 引 者 素 


1 








3-117 设置 参数 


3-118 向 下 移动 





4 


] 0 按 Ctrl+[ 组 合 键 将 图 层 癌 下 调整 三 层 ， 并 谎 加 图 层 家 厂 ， 然 后 使 用 黑色 的 “ 男 


笔 工 具 ” 浴 抹 左 侧 多 余 的 部 分 ， 效 果 如 图 3-119 所 示 。 


] 的 绘制 矩形 并 复制 两 个 ， 然 后 单 击 “水 平 大 中 分 布 ”按钮 ， 如 图 3-120 所 示 。 


L133 








Photoshop 创意 @ pp 元 素 设计 从 入 门 到 精通 











图 3-119 涂抹 蒙 版 


如 图 3-121 所 示 。 




















| 样式 ee Ee 
| 济 舍 选 硕 渐 议 一 入 和 = 混合 选项 :默认 
| 局 笠 面 和 浮 央 混合 模式 (6): 正片 亚 底 ~ 加 加 回 笠 面 和 浮 内 
| 局 等 高 线 不 透明 度 (0O): 26  % = 一 一 
口 纹理 角度 (A): (| ) 50 度 回 使 用 全 局 光 (G) 避 措 边 
口 描 边 ss 可 内 阴影 
回 内 发 光 阻塞 (C): 5 mm 0 % 刁 关 深 
一 光泽 大 小 (5S): 2 5 像素 本 颜色 又 加 
回 可 渐变 县 加 
器 颜色 到 加 品质 了 图 案 到 加 
二 高 线 4 人 -| DBs 
| 图 案 亚 加 回 投影 
加 外 发 光 2 轩 
丫 投 影 | 设置 为 默认 值 | | 复位 为 默认 值 ] 




















图 3-121 添加 图 层 样式 


| 9 单 击 “确定 ”按钮 
后 的 图 像 效 果 如 图 
3-122 所 示 。 
» 复制 图 层 样式 ， 
后 选择 另外 两 个 
矩形 图 层 ， 粘 贴图 层 样式 ， 
如 图 3-123 所 示 。 


然 


dy 





图 3-122 图 像 效果 


选择 一 个 矩形 ， 双 击 进 入 “图 层 样 式 ” 对 话 框 ,设置 “内 阴 


图 3-120 绘制 矩形 


Es 29 
尿 和 


外 发 光 





结构 
混合 模式 {E): 滤 色 Md 
不 透明 度 (0): en 75  % 
杂 色 人 N): G il % 
@ 0 © rr 
图 素 
方法 (Q): 季 和 v 
扩展 P): CS 0 % 
大 小 (5): 本 5 像素 
品质 
高 线 : [4 | 同 消 除 锯 齿 (L) 
范围 RR): % 


拉动 0): C= 0 % 





| 设置 为 默认 值 | | 复位 为 默认 值 | 








图 3-123 粘贴 图 层 样 式 的 效果 


”输入 文字 , 如 图 3-124 所 示 。 然 后 为 文字 图 层 添 加 图 层 样 式 ， 





册 |] 使 用 “ 横 排 文字 工具 
如 图 3-125 所 示 。 

描 边 

结构 
大 小 人): CPP | 
位 置 p): 外 部 ~ 

混合 模式 (6): 正常 M 

不 透明 度 (O): 34 


填充 类 型 FF): 颜色 ~ 
新 名 : 国 国 


YE、 





外 发 光 
结构 
混合 模式 (E): 正常 





不 透明 度 (O): 


杂 色 (N): (= 一 0 


44 % 
% 
图 
图 素 
方法 (Q): 柔和 ~ 
扩展 p): 0 % 


大 小 8): 一 5 





品质 


等 高 线 : 4 回 湾 多 所 占 ( 


范围 从):; 50  % 
拌 动 Q): G 0 % 





OO 











图 3-124 输入 文字 





网 


单 击 鼠 标 右键 ， 执行 “从 图 层 建 并 组 ” 合 


制作 开关 的 男 一 个 状态 ， 如 图 3-127 所 示 。 


蛙 击 “确定 ”按钮 , 完成 效果 如 图 3-126 所 示 。 然 后 将 除 


图 3-125 添加 图 层 样式 


以 外 的 所 有 图 层 选中 ， 
令 。 接 着 复制 组 ， 并 修改 颜色 、 文 字 等 ， 


刁 已 忆 . 
月 乐 





a a 











图 3-126 完成 效果 图 3-127 开关 的 另 一 个 状态 


\ IE 进度 亲 滑 块 

进度 条 是 在 缓冲 和 加 载 信息 时 所 显示 的 控件 ， 它 的 作用 是 显示 当前 加 载 的 百分比 ， 使 
用 户 对 加 载 的 进度 有 所 了 解 。 

鸭 进度 条 的 类 型 

进度 条 的 类 型 有 “线形 进度 条 ”和 “ 圆 形 进度 条 ”两 种 类 型 。 


@ 线形 进度 条 : 线形 进度 条 指示 整体 的 进度 或 时 间 ， 当 指示 器 达到 100% 时 则 完 
成 加 载 ， 不 会 再 返回 0% 重新 开始 。 图 3-128 所 示 为 线形 进度 条 。 


3-128 线形 进度 条 


人 ”出 形 进度 条 ， 圆 形 进度 条 通过 和 一 个 图 标 结合 使 用 ， 使 得 效果 比 线形 进度 条 更 








为 丰富 ， 为 加 载 的 等 等 时 间 珊 来 更 多 趣味 性 。 图 3-129 所 示 为 圆 形 进度 条 。 


3-129 圆 形 进度 条 





加 设计 思路 
本 实例 制作 的 是 进度 条 滑 块 ， 设 计 圆 角 矩形 作为 线性 进度 条 的 整体 外 形 ， 完 成 的 进度 
呈 蓝 色 ， 未 完成 的 进度 使 用 渐变 填充 效果 ， 图 3-130 所 示 为 制作 流程 图 。 





Photoshop 创意 A 元 素 设 计 从 入 1 门 到 精通 
更 兽 2U| 








—» oO 0 


图 3-130 制作 流程 图 
团 制作 步 又 
下 面 介绍 进度 条 滑 块 的 制作 。 
| 品 zn WD BN, 再 2 后 上 -2 
i 使 用 “ 圆 角 和 矩形 工具 ”绘制 圆 角 窍 形 , 在 “ 属 


W: |2655 像 素 | 多 H: |30 像 素 | ee 如 图 0 sl 所 示 。 
i a 设置 后 的 矩形 效果 如 图 3-132 所 示 。 


Em 21|, 
3 占 3 
S| >=, |3 己 | 


愤 * 咱 瞩 *|| 际 ?| 





13 像 素 13 像 素 13 像 素 13 像 素 
国 )|13 像 素 ”||13 佛 表 “| 国 
E 


图 |13 上 伪 表 ”||13 伪 素 ”| 国 











图 3-131 设置 参数 图 3-132 和 矩形 效果 


() 为 图 层 添 加 “内 阴影 ”“ 颜 色 营 加 ”“ 渐 变 对 加 ”和 “投影 ”4 种 样式 ， 如 图 
Bs lA 



























































在 人 本 颜色 到 加 
漫 昆 合 选 项 :时 直人 混 合 鞠 珊 :里 二 从 着 四 
ep Ee 科 面 和 学 央 混合 模式 @): 要 加 -mm 
等 高 线 RR = ER 不 透明 度 (0): a 31  %% 
纹理 角度 (A): | 1 20 ” 度 加 使 用 全 局 光 (G) 
指 边 - 纹理 [设置 为 默认 值 ] [ 复位 为 默认 值 ] 
a 2 
内 发 光 阻塞 (C): 0 % 可 内 阴影 
大 小 8): 5 一 一 4 像素 和 
颜色 到 加 品质 光泽 
2 人 
国家 加 习 渐变 亚 加 
外 发 光 杂 色 人: 0 | 图 案 琶 加 
习 投影 [设置 为 默认 值 。] [ 复位 为 默认 值 | 外 发 尖 
可 投影 
样式 渐变 亚 加 种 于 投影 
渐变 结构 
滞 世 过 斋 古 庆 受 混合 选项 :默认 人 
常 志 口 宪 面 和 混合 ”了 
笠 面 和 浮 贿 混合 模式 (DO): 正常 仿 色 不 通明 度 O: 一 % 
等 高 线 不 透明 度 (P): » 100 % 等 高 线 
| 新 变 : 厂 一 一 一 一 ]z] 加 ER) 纹理 角度 (A): (、】120 度 加 使 用 全 局 光 人 
纹理 指 边 人 
措 边 样式 0D: 线性 ~ 园 与 图 层 对 齐 外 可 内 阴影 本 1! 
, 负 扩展 RQ: A 一 0 % 
习 内 阴影 角度 (N): | * | 90 度 ee 大 小 (9): /= 一 0 像素 
内 发 光 ~ 
光泽 缩放 (S): 100  % 可 颜色 到 加 品质 
习 渐变 亚 加 证 
下 本 [设置 为 默认 什  [ 夏 位 为 黑 认 什 ] 图 过 到 加 | A Him Ee 
和 杂 色 0， 了 
= 外 发 光 
图 案 到 加 习 图 层 控 空 投影 (J) 
外 发 江 | 设置 为 默认 值 | | 复位 为 默认 值 | 
可 投影 
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4 添加 图 层 样式 后 的 效果 如 图 () 癌 使 用 “ 圆 角 算 形 工具 ”绘制 圆 角 和 矩 
3-134 所 示 。 


形 ， 并 设置 参数 ， 如 图 3-135 所 示 。 


回回 次 撒 状 属性 


: |200 像素 | 名 H: |s 像素 
冯 |276 像素 多 |395 像 素 




















[< 点 |-|[ 一 -| 











辕 。< 咱 于 s|| 苇 = 
加 B 集 素 ”||| 全 素 | 加 
图 
加 |3 像 素 3 像素 国 








3-134 图 像 效果 3-135 绘制 圆 角 和 矩 形 


Ob 为 图 层 添加 “内 阴影 ”“ 渐 变 琶 加 ”和 “投影 ”样式 ， 如 图 3-136 所 示 。 

































































































































































































































































































































































































































































[一 一 ”一 丙 阴影 2 | 1 
和 EE 属 se a > ee 
赣 合 选项 音 息 一 -一 沪 言 迹 硕 三 议 学 混合 选项 :默认 es 
I 混合 模式 6)， 正常 ~ 国 A 混 全 模式 (0): 正常 ” ”> 辣 仿 色 i 混合 模式 (6): 正常 ~ 
了 纹理 角度 (Vy: 【 、】 120。 度 回 使 用 全 局 光 人 纹理 ll 口 纹 理 角度 (A): ( \】 1 度 器 使 用 全 局 (6) 
内 发 光 a 0 一 -局 可 内 阴影 角度 0W: (0 度 一 扩展 R): 5 一 0% 
光泽 大 小 (S): T= 6 像素 回 内 发 光 ee "i - 光 深 大 小 (S): 0 像素 
日 : ll 100 
颜色 要 加 品质 一 一 颜色 于 加 品质 
司 4p 人 i 1 们 1 Tr 
= 一 一- 等 高 线 : [A 消 除 锯 可 这 六 球 全 避 作 内 从 = 一 一 $8: | S| 口 淖 Si 
投影 设置 加 入 [ 揽 位 为 回 认 入 一- 一 本 图 必 控 全 投影 
设置 为 默认 值 ] [ 复位 为 默认 值 
设 
3-136 添加 图 层 样式 


单 击 “确定 ”按钮 后 图 像 如 US 使 用 “ 圆 角 矩形 工具 ”绘制 一 个 
图 3-137 所 示 。 宽度 相同 的 圆 角 和 矩形， 如 图 3-138 
所 示 。 


图 3-137 图 像 效果 3-138 绘制 圆 角 和 矩形 


为 图 层 添加 “内 阴影 ”“ 闫 色 肝 加 ”和 “投影 ”图 层 样式 ， 如 图 3-139 所 示 。 



























































































































































































































































































































































[和 | [由 阴影 得 未 一 颜色 要 加 和 | 一 投影 
混合 选项 :默认 结构 | 颜色 站 合 进项 可 访 结构 
[EE 混 全 模式 6): 正常 ~ mn 温 合 选 项 :默认 混合 选项 : 默 人 ES 
口 斜面 和 浮雕 ti | 混合 模式 6): 正常 - i 混合 模式 (6) 正常 区 
一 言 . ~ 4 7 pe 可 度 ， pp 
人 角度 (A): Wy) 120 度 回 使 用 全 局 光 (G) 纹 香 = = 纹理 角度 (A): | “120 ” 度 同 使 用 全 局 光 (G) 
措 边 人 es 设置 为 默认 值 】 [复位 为 味 认 值 避 指 边 多 人 
阻塞 (0: 一 0 % 措 边 可 内 阴影 晶 ): 和 | 
四 Fi 习 内 阴影 机 扩展 R): 一 一 0 % 
男 光泽 - 内 发 光 光泽 大 小 (S): Ce 0 像素 
sa 品质 加 光泽 本 颜色 又 加 品质 
i 5 | A1| 避 淹 多 费 占 ( 可 渐变 要 加 | 上 站 消除 锯 占 中 
外 发 光 杂 N: G0 % 可 新 变 伙 加 可 图 案 到 加 ee 2 
[二 | [加 SF + es 
局 投影 办 值 | [ 夏 位 为 内 值 有 外 发 光 Ee 
机 回 外 发 光 所 避 图 层 控 空投 影 (J) 
可 投影 设置 为 默认 值 | [复位 为 默认 值 






























































3-139 添加 图 层 样式 


143 








更 锣 5 UI Photoshop 创意 ® PP 元 又 设计 从 入 门 到 精 馆 
狼 一 一 一 一 一 


| 在 图 层 上 单 击 鼠标 右键 ， 执 行 “ 转 换 为 智能 对 象 ” 人 命令， 如 图 3-140 所 示 。 然 
后 新 建 一 个 尺寸 为 4X4 px、 背 景 为 透明 的 文档 ， 在 其 中 绘制 两 个 矩形 ， 填 充 需 
人 


编 加 册 萤 ... 





复制 CSS 
复制 图 层 ,. 





图 3-140 执行 “转换 为 智能 对 象 ”命令 图 3-141 绘制 矩形 


一 执行 “编辑 ”|“ 定 义 图 案 ” 命 令 ， 如 
EEC 
定义 自 定形 状 - 图 3-142 所 示 。 


清和 至 (R) z 、 
Adobe PDF 预 设 .… ] 几 强 a 对 话 框 ， EA 了 确定 十 按钮 9 如 图 
预 设 » 
去 3-143 所 示 。 

总 色 设 置 (G)... Shift+Ctrl+K 
指定 配置 文件 .… 

转换 为 配置 文件 (V)... 

键盘 快捷 搜 .… Alt+Shift+Ctrl+K 
菜单 (U)... Alt+Shift+Ctrl+M 
首选 项 (N) | 


上 


| ”同步 设置 (E) | 
图 3-142 执行 “编辑 ”|“ 定 义 图 案 ” 命 令 图 3-143 单 击 “确定 ”按钮 


| 再 次 打开 “图 层 样式 ”对 话 框 ， 选 择 “ 图 案 登 加 ”， 在 “图 案 ” 中 选择 前 面 定 
义 的 图 案 ， 设 置 不 透明 度 为 6%， 如 图 3-144 所 示 。 

















有 ee ] 单 击 “ 确 定 ” 按 钮 后 的 图 像 
赣 合 选项 : 肘 认 县 
笠 面 和 学 温 合 模式 人): 正常 如 图 3-145 所 示 。 
等 高 线 不通 明朗: 一 
纹理 国 -i 
描 边 回 | 贴 紧 原点 (A) | 
内 阴影 -| 
光泽 EE 
颜色 到 加 
一 一 
外 发 光 
习 投影 














图 3-144 选择 图 案 图 3-145 确定 效果 


| 中 使 用 “椭圆 工具 ”绘制 正 圆 ， 
如 图 3-146 所 示 。 ee 


3-146 绘制 正 圆 





| Ob 为 该 图 层 添 加 “内 阴影 


“渐变 下 加 ”“ 投 影 





的 图 层 样式 ， 如 图 3-147 所 示 。 





内 阴影 





结构 



































回国 国 ] 中 
3 时 











混合 模式 (6): 正常 v[L | 


不 透明 度 (0): = 100 % 





角度 (A): (| 50 一度 回 使 用 全 局 光 (G) 
4 











距离 0): 一 一 1 像素 





阻塞 (0): (= 一 熏 0 % 


大 小 (5): 0 像素 


一 渐变 又 加 





投影 








渐变 


结构 





































































































品质 


等 高 线 : [A 消除 锯 占 QD 


杂 色 (N): CC 一 0 % 



























































设置 为 默认 值 复位 为 默认 值 


























混合 模式 (0O): 正常 ~ 





























| Rr 

















样式 (0): 线性 v 贱 与 图 层 ? 








度 . 度 
角度 (N) ° / 90 度 

















缩放 (5): 一 一 一 100 % 


混合 模式 (6)， 正 党 ~ 国 国 
不 透明 度 (0): = 15  % 
角度 (A): C 120 ” 度 加 使 用 全 局 光 (G) 














距 高 D): 一 4 像素 
扩展 (R): SS 0 9 
大 小 (5): 4 像素 








品质 














设置 为 默认 值 复位 为 默认 值 











< | 加 | < 
20 局 


























等 高 线 : LU 可 水 | 据 上 (0) 


杂 色 (NI 0 % 









































Y 图 层 挖 空 投影 (U) 
设置 为 默认 值 复位 为 默认 值 




















预览 (P) 


轩 100% 冉 


角度 (A): 团 。 讼 中 


距离 (D): 33 像素 





3-150 设置 参数 


万 选 定 
[下 :| 入 明度: [55% | | 
负 : 回 A/ 中 日。 境 : 





图 3-152 填充 并 设置 不 透明 度 


3-147 添加 图 层 样式 


蛙 击 “确定 ”按钮 后 的 图 像 如 图 
Sl 


18 


修改 不 透明 度 为 
55%， 如 图 3-149 所 示 。 


3-149 复制 并 修改 不 透明 度 


| 转换 为 智能 对 象 ， 执 行 “ 滤 镜 ”|“ 模 钮 
糊 ”| “动感 模糊 ”命令 ， 在 打开 的 对 话 


框 中 设置 角度 与 距离 参数 ， 如 图 3-150 所 示 。 
» 0) 单 击 “ 确 定 ” 按 钮 , 图 像 如 图 3-151 所 示 。 








3-151 图 像 效 果 


Ne 


E 滤 镜 的 缩 


略 岁 ， 填 充 白 色 ， 并 设置 不 透明 度 为 


55%， 如 图 3-152 所 示 。 
四 选择 “和 矩形 工具 ”， 
如 图 3-153 所 示 。 


A 
和 仔 2 


在 选项 栏 中 选择 “路 


省 吕 ( 日 ”图像 四 ”图 后 (LD) 


3-153 选择 “路 径 ” 
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由 
机 


photoshop 创意 戎 pp 元 素 设 计 从 入 门 到 精通 





样式 


FF” 
况 合 选项 : 自 定 





口 斜面 和 浮 贿 
口 等 高 绪 
器 纹理 

口 措 边 

口 内 阴影 

回 内 发 光 

加 光泽 

品 颜色 到 加 

口 图 案 秋 加 

回 外 发 光 

口 投影 





遇 
Me 








按 住 Ctrl 键 ， 单 击 “ 图 属 ”面板 中 的 “添加 图 层 葵 版” 按钮， 为 所 选 图 层 添 加 


“矢量 蒙 版 ”， 然 后 在 画布 中 绘制 矩形 ， 如 图 3-154 所 示 。 
» /| 使 用 由 算 形 于 只 中 给 出 短 形 川 几 81651 有 1 夫 。 


Co = 


图 3-154 绘制 矩形 


为 图 层 添加 “渐变 车 加 ”图 层 样 式 ， 渐 变色 的 色 标 颜色 为 #65bce4 到 透明 ， 如 


图 3-156 所 示 。 


在 “图 层 ” 面 板 中 设置 混合 模 却 为 “ 登 加 ”、 不 透明 度 为 50%、 填 充 为 0%， 如 


图 3-157 所 示 。 


图 3-155 绘制 矩形 





渐变 晋 加 


一 渐变 


混合 模式 (D): 正常 





加 ] 仿 色 


不 通明 度 P): 一 100 % 
新 朗 : 口 反 向 R) 
” 辐 与 图 层 对 齐 外 





样式 (0D): 线性 
/A = 

角度 (N): wy 0 度 

蚂 放 (5): 一 一 100 oo 


设置 为 默认 值 和 夏 位 为 默认 值 











3-156 添加 图 层 样式 


图 像 效 果 如 图 3-158 
所 示 。 

使 用 “ 圆 角 和 窍 形 工具 ” 
绘制 圆 角 和 矩形， 设置 参 


数 如 图 3-159 所 示 。 





图 3-158 图 像 效果 











3-157 设置 图 层 









属性 
| 加 器 刘 形 杖 属性 


ww oo 
[ss | | 一 
11 像 素 11 像 素 11 像 素 11 像 吉 

口 国 
中 [ii 像素 ”||11 恤 素 | 口 


3-159 绘制 圆 角 矩形 





: [像素 | ca H: 0 像素 | | 日， 局 埠 | 状 了 =e 对 齐 边 各 


-dAad/ VY D> 
=> 办 有 :EE\、、\ 
一 中 大 入 [一口 吕 QO 
Qe 一 OO | D1 NO bb 
# | 奉 | 鱼 :第 半 车 米 > Dh 让 二 半 区 区 可 头 4 
虽 烛 各 而 闪 这 雪 米 焰 米 WVWwy5) 
全 一 90/ 由 弟 时 向 和信 信人 入 全 六 人 下 本 业 沙 
襄 亚 生 西 区 入 一 1 重光 加 一- 机 一 国 国 
a a 
立 便 类 闪 会 口 史 史 扩 令 7J 儿 Dv 口 珊 忠 国 
DAA 人 KHOODMO wnBNvV! 
3 类 关 入 关心 国 会 站 蝇 喜 国 一 只 O90 
OO 下 二 类 ”六 O@m™msS7i&4ONNYV 
PS 

3 OLLIO YET ROO HONE 





图 3-160 选择 形状 
人 () 加 “的 注 ， 
所 示 。 


“内 阴影 





























样式 
时 站 
混合 选项 : 积 认 
人 大 小 (S): C9 像素 
人 位 置 p): 外 部 ~ 
纹理 混合 模式 伯 ): 正常 至 
不 透明 度 (0): CT 一 一 9  % 
; 一 - 填充 类 型 F)， 颜色 ~ 
光泽 疡 名 : 国 国 
颜色 到 加 
习 新 变 到 加 
图 案 到 加 
外 发 光 
可 投影 | 设置 为 默认 值 | | 复位 为 默认 值 | 
入 到 靳 变 秋 加 
瘟 合 选 珊 ;默认 人 
笠 面 和 学 隔 混合 模式 (0): 正常 v 上 | 仿 色 
本 不 透明 度 (P): DW 100 % 
纹理 渐变 :[ Tr| 器 反 庙 ® 
可 指 边 样式 (D): 线性 ~ ” 团 与 图 层 对 齐 (D 
可 内 阴影 角度 (VW: 上 人 18 度 
内 发 光 一 
光泽 多 直 (5): 100 0 
颜色 到 加 | 设置 为 默认 值 | | 复位 为 默认 值 | 
图 案 亚 加 
外 发 光 
可 投影 





» 选择 “ 目 定 形状 工具 ” 








图 3-161 绘制 图 形 并 调整 位 置 


在 选项 栏 中 
选择 形状 为 “方块 ” 如 图 3-160 所 示 。 
然后 绘制 图 形 ， 并 调整 位 置 ， 如 图 3-161 所 示 。 


“渐变 登 加 ”和 “投影 ”4 种 样式 ， 如 图 3-162 





样式 
混合 选项 :默认 
口 | 料 面 和 浮 内 
等 高 绪 
| 纹理 
同 描 边 


颜色 于 加 
站 渐变 亚 加 

图 案 亚 加 

外 寂 光 
加 投影 





样式 
混合 选项 :默认 
笠 面 和 浮雕 
等 高 线 
纹理 
习 描 边 
习 内 阴影 
颜色 严 加 
引 渐变 到 加 
图 案 琶 加 
外 发 光 











内 阴影 

结构 

混合 模式 (8) 正常 ~ 

不 透明 度 (D): ES 75 |% 
角度 (A): | “| 120 ” 度 园 使 用 全 局 光 (G) 
距离 (0): 人 1 像素 
阻塞 (c): 4 0  % 





大 小 3): 全 1 像素 
品质 


等 高 线 : | - | 消除 锯齿 (0) 
杂 色 全: G 0 % 








| 设置 为 默认 值 。 | | 复位 为 默认 值 | 





混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): ”22 % 


角度 (A): (| |) 120 ” 度 园 使 用 全 局 光 (G) 











距离 D): 二 二 像素 

扩展 Ri: 一 0 % 

大 小 (5): EE 4 像素 
品质 

等 高 线 ! - 局 消除 锯 上 QD 

杂 色 (N): 6 % 


避 图 层 控 空 投影 (JU) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 














图 3-162 添加 图 层 样 式 


届 单 击 “ 确 定 ” 按 钮 后 图 像 


如 图 3-163 所 示 。 





图 3-163 图 像 效果 


32 


图 3-164 输入 文字 


使 用 “ 横 排 文字 工具 ” 输 
入 文字 ,如 图 3-164 所 示 。 
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CHD 设计 新 手 使 用 Photoshop 的 技巧 





介绍 APP UI 设计 新 手 使 用 Photoshop 的 技巧 。 


因 图 层 与 组 
在 团队 合作 中 ， 图 层 和 组 的 使 用 十 分 重要 。 


@ 命名 图 层 ， 而且 要 合理 且 精 确 地 命名 : 不 要 嫌 麻 烦 ， 一 旦 设计 的 层次 多 了 ， 要 





找到 一 个 图 层 将 变 得 非常 困难 。 对 每 一 个 图 层 都 要 命名 ，“ 疼 层 1 副本 2” 这 
样 的 图 层 名 字 是 要 严格 茶 止 的 。 

合理 使 用 图 层 分 组 (图 层 文件 来 ): 通过 图 层 分 组 可 以 更 快 地 看 清楚 整个 文件 
的 结构 ， 并 且 可 以 很 快 地 找到 想 要 的 那 一 层 。 

删除 不 必要 的 图 层 : 删除 不 必要 的 图 层 会 使 文件 更 清晰 易 用 。 

整合 合并 共同 元 素 : 把 一 个 Logo 复制 5 次， 并 且 分 别 为 它们 设置 不 同 的 样式 ， 
这 是 不 必 的 ， 如果 可 以 ， 尽量 做 一 个 主 图 层 , 把 其 他 的 样式 设置 在 这 个 对 象 上 。 
使 用 图 层 复 合 和 智能 对 象 : 智能 对 象 不 用 建立 很 多 PSD 文件， 在 修改 的 时 候 可 
以 反映 到 任何 一 个 使 用 了 同样 的 智能 对 象 的 图 层 。 











辐 图 片 处 理 技巧 
对 图 片 的 处 理 都 要 是 非 破坏 性 的 ， 用 户 肯定 不 希望 添加 了 不 可 挽回 的 效果 导致 图 片 或 


者 按钮 再 也 无 法 被 继续 修改 了 。 


尽量 让 所 有 元 素 保持 矢量 ， 这 样 在 拉 伸 的 时 候 可 以 保持 元 素 的 精度 ， 人 否则 将 矢量 文件 


备份 ， 再 进行 操作 ， 以 便 随 时 恢复 。 





将 婚 军 统一 化 ， 将 搞 章 放 在 图 层 组 上 而 不 是 图 层 上 ， 这 样 在 修改 的 时 候 可 以 非 
单方 便 地 应 用 到 整个 组 的 图 层 。 

对 齐 : 对 齐 网 格 ， 对 齐 像素 ， 对 齐 任 何 一 切 可 以 对 齐 的 东西 。 

说 蛋 使 用 混合 模式 : 混合 模式 不 利于 后 期 编辑 。 

非 候 坏 性 用 证 效用 索 版 、 智 能 对 象 ,各 种 方式 尽量 你 证 原 图 没有 损伤 任何 内 容 。 
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团 特效 使 用 技巧 
用 户 要 适量 地 使 用 图 层 样式 和 滤 镜 ， 更 多 滤 镜 不 一 定 等 于 更 好 的 设计 。 
















适当 地 使 用 其 色 有 登 加 : 可 以 通过 双击 修改 形状 颜色 的 ,最 好 不 要 使 用 颜色 警 加 。 
合理 地 合用 和 拓也: 内 部 摘 边 相对 来 说 更 为 精确 ， 而 居中 摘 边 和 外 部 描 边 会 形成 
别 角 。 





OO 





而 也 设计 师 需 要 熟 记 的 Photoshop 快捷 键 


使 用 快捷 键 可 以 加 快 工作 效率 ， 下 面 列举 出 APP UI| 设计 师 必 须 熟 记 的 Photoshop 快 
捷 键 。 
四 图 层 


快速 填充 图 层 前 景色 : Alt+Delete 盖 印 图 层 
背景 色 : Ctrl+Delete TEST 


me -II 三 
上 移 至 图 层 顶端 Ctrl+Shift+] | 下 移 至 图 层 底 端 Ctrl+Shift+1 
复制 选区 内 的 多 个 图 层 Smeeme 
回 庄 择 
选择 方 同 Ctrl+Shift+l 重新 选择 CtrlI+Shift+D 
选择 所 有 图 层 Ctri+Alt+A | 。。 从 选区 中 减 去 一 部 分 Alt+ 拖 移 
xi 居于 时 于 人 CurT 后 Citio 





























































录 : Ctrl+4 、 
G OilE5 计 
一 一 ”AAA 
国画 笔 /填充 
增加 / 减 小 画笔 大 小 打开 “ 烛 序 ”对 证 恰 Shift+F5 
帅 全 修 / 最 局 全 小 笔 刷 jl | 名 由 Em 
er 
增加 / 减 小 画笔 硬度 增加 : } 开关 喷枪 选项 Shift+Alt+P 
减 小 : { 
@ 罗 图像 
自由 变换 Ctrl+T 色 阶 Ctrl+L 






na cir 


色相 /饱和 度 Ctrl+U 去 色 Ctrl+Shift+U 
创建 剪贴 蒙 版 Ctrl+Alt+G 变换 混合 模式 Shift++/ Shift+— 
(3 视图 缩放 


缩放 到 100% Ctrl+AIt+O/Ctrl+1 按 屏幕 大 小 缩放 Ctrl+0 
放大 Ctrl++ 缩小 


(汉文 本 


增加 / 减 小 所 选 字 符 的 磅 增加 : Ctrl+Shift+> 增加 / 减 小 所 选 字 符 的 磅 增加 ， Ctrl+Alt+Shift+> 
” 数 Co ， 减 小 : Ctrl+Shift+< 数 (10pts) 减 小 : Ctrl+Alt+Shift+< 


让 性 AAA 二 4 二 上司 、 、 、 S 左 i Ctrl+Shift+L 
对 所 选 字符 进行 字 距 调整 文本 左 对 章 / 居中 对 齐 / 居中 对 并 CtrlrShift+C 


右 对 齐 右 对 齐 . Ctrl+Shift+R 












































[7 保存 /关闭 
保存 并 调 出 选项 框 Ctrl+ Shift+Alt+S 关闭 并 打开 Adobe Bridge Ctrl+Shift+W 
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py 
D 、 


~ 
、 








如 何 设 计 导 骸 ， 


a 不 同 的 产品 需求 和 商业 目标 决定 了 不 同 的 导航 框架 的 设计 模 


式 ， 而 交互 设计 的 第 一 步 就 是 决定 导航 的 框 染 设计 ， 框 染 确 定 后 才 
能 开始 逐渐 丰富 其 他 部 分 。 


人 全 


人 国 为 组 织 信息 分 层 

首先 需要 为 组 织 信息 分 层 ， 在 这 一 步骤 一 定 要 做 好 信息 层级 的 扁平 化 ， 不 能 把 所 有 的 
组 织 信息 都 铺 出 来 ， 这 样 做 只 会 让 用 户 心烦 意 乱 找 不 到 想 要 的 重要 操作 ， 也 不 能 把 层级 做 
得 很 深 ， 用 户 没有 那么 多 耐心 跟 你 玩 “ 躲 猫 猫 ”。 在 设计 时 一 定 要 将 做 核心 、 最 稳固 、 最 
根本 的 功能 要 素 放 在 第 一 层 页 面 ， 其 他 的 内 容 放 在 第 二 层 、 第 三 层 甚至 更 深 。 
到 确定 导航 的 设计 样式 

之 后 根据 层级 的 深度 和 广度 来 确定 导航 的 设计 样式 ， 这 并 不 难 ， 移 动 端的 屏幕 尺寸 就 
这 么 大 ， 操 作 方式 也 无 非 就 是 点 击 、 滑 动 、 长 按 这 些 。 接 下 来 具体 介绍 不 同 的 导航 样式 。 








/| Wh APP 的 导航 样式 多 种 多 样 ， 如 图 4-1 所 示 。APP 导航 按 排列 

Wd 方式 分 为 列表 式 和 网 格式 两 大 类 ， 再 由 此 演变 成 其 他 类 别 。 常 见 的 

出 | 主导 航 有 标签 式 、 抽 居 式 、 宫 格式 、 列 表 式 等 ， 以 及 不 同 导航 之 间 
的 组 合 。 








办 揪 导 币 





























国 国 回国 国 


图 4-1 APP 的 导航 样式 
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s 戎 pp 元素 设计 从 入 门 到 精通 


BD 420 


标签 式 导 航 是 APP 应 用 中 最 普遍 、 最 常用 的 导航 样式 ， 适 合 在 相关 的 几 类 信息 中 频 
繁 地 切换 。 这 类 信息 的 优先 级 较 高 ， 用 户 使 用 频繁 ， po 一 般 根 据 逻 辑 和 
重要 性 将 标签 的 分 类 控制 在 5 个 以 内 ， 在 视觉 表现 上 将 当前 用 户 的 位 置 突 显 ， 用 户 可 以 迅 
速 地 实现 页 面 之 间 的 切换 而 不 会 迷失 方向 ， 简 单 且 高 效 。 

标签 陈 导 航 还 细 分 为 庶 部 标签 导航 、 放 部 标签 的 扩展 导航 、 顶 部 标签 导航 三 种 。 

(网 底部 标签 导航 

我 们 常见 的 QQ、 微 信 、 淘 宝 等 使 用 的 都 是 底部 标签 导航 ， 这 种 导航 位 于 页 面 底部 ， 

是 最 常见 的 一 种 导航 形式 ， 在 图 4-2 中 的 APP 使 用 的 就 是 底部 标签 导航 。 

通 弟 ， 底 部 标签 导航 有 4 ~ 5 个 标签 ， 一般 不 会 超过 5 个 。 若 有 更 多 的 选项 ， 在 操作 

时 可 将 最 后 一 项 设置 为 “更 多 ”， 将 一 些 次 要 功能 放置 在 “更 多 ”里 ， 如 图 4-3 所 示 。 


Photoshop 创意 








图 4-2 底部 标签 导航 图 4-3 “更 多 ”选项 
下 面 列 举 了 放 部 标签 导 航 的 优 缺 点 。 
@ 优点 
它 列 出 应 用 程序 重要 的 功能 ， 直 接 展 现 最 重要 入 口 的 内 容 信息 ， 能 让 用 户 直 观 
地 了 解 到 APP 的 核心 功能 
通过 导航 的 变化 用 户 能 很 清楚 地 知道 当前 所 在 的 入 口 位 置 。 
通过 点 击 叶 航 入 口 用 户 能 轻松 地 在 各 入 口 间 频繁 跳 转 且 不 会 迷失 方 同 。 














@， 当 功能 入 口 过 多 时 该 样式 显得 笨重 、 不 实用 ， 
人 该 导航 会 一 直 在 界面 下 方 ， 因 此 会 占用 一 定 高 度 的 空间 。 











下 面 制作 底部 标签 导航 ， 图 4-4 所 示 为 制作 流程 图 。 








0 





4-5 填充 画布 颜色 


0 


如 图 4-7 所 示 。 





一 斜面 和 浮雕 
结构 
样式 (D): 内 斜面 
方法 (Q@): 平滑 M 
深度 0): 一 一 一 % 
方向 : @ 上 © 下 
大 小 四 : ES 5 “| 像素 
软化 FF): 一 9 16 像素 








阴影 





角度 NW: 、50 度 
| 。 | 回 使 用 全 局 光 (G) 
vn 


光泽 等 高 线 : [4 回 清 束 据 齿 () 
高 光 模 式 (H) 正常 ~ 
不 透明 度 (D): 人 100 oo 
阴影 模式 (A):， 正常 ~ 国 国 
不 透明 度 (CO: AR 10 % 





























设置 为 默认 值 复位 为 默认 值 


渐变 县 加 


新 建 空白 文档 ， 填 充 画 布 颜 
色 , ,如 图 4-5 有 所 示 。 


为 图 层 添 加 ‘ 斜面 和 浮雕 2 | 内 阴影 9? 


4-4 制作 流程 图 


02 


4-6 绘制 圆 角 算 形 


“外 发 光 ” “渐变 登 加 ”和 “投影 ” 


使 用 “ 圆 角 和 矩形 工具 ”绘制 
出 角 和 矩形 ， 如 图 4-6 所 示 。 





样式 ， 















































一 内 阴影 
结构 


一 a 








结构 











混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): se 25 % 
县 . (6 浆 司 光 
前 度 (A) 0 EY 度 加 | 使 用 全 局 光 (G) 


阳 塞 (CC 0 % 
大 小 (9): [> 和 像素 


混合 模式 日: 正常 ~ 
不 透明 度 (0): SC 30  % 


@ 国 





[过 
图 素 





方法 (Q): 杀 和 
扩展 (P): C0 % 
大 小 BS): 下 一 一 一 一 > 3 像素 











杂 色 NG 一 0 % 








等 高 线 ; [dd 器 汪 对 术 具 (0) 


范围 R): 一 一 50  % 
拉动 ]): CS 0 % 








设置 为 默认 值 复位 为 默认 值 











复位 为 认 什 











投影 








一 渐变 


结构 








混合 模式 (D): 正常 


不 透明 度 (P): 一 100 oo 


渐变: [>] 口 Eaw) 


回访 色 





样式 (): 线性 


县 .DD 县 
角度 (人 ey 7 90 度 


”|Y 与 图 层 对 齐 人 


混合 模式 (6): 正常 
角度 (A): | 
扩展 (R): Cc 一 0 oo% 
大 小 (5): 4 亿 吉 


~ mm 


个 i 
\“ ) 0 度 回 使 用 全 局 光 (G) 





品质 











缩放 (G): 一 100 % 





设置 为 默认 值 和 夏 位 为 默认 值 











杂 色 (DC 0 % 


等 高 线 : [LA 局 消除 锯齿 

















图 层 控 空投 影 () 
设置 为 默认 值 复位 为 默认 值 











图 4-7 添加 图 层 样式 








ESS 








photoshop 创意 戎 pp 元 素 设 计 从 入 门 到 精通 





() 单 击 “ 确 定 ” 按 钮 ， 窍 形 效果 
如 图 4-8 所 示 。 





图 4-8 和 矩形 效果 


0 复制 图 层 ， 清 除 图 层 样式 ， 然 后 重新 添加 “斜面 和 浮 驹 ”“ 内 发 光 ” 和 “投影 ” 


样式 ， 如 图 4-9 所 示 。 












































































































































一 斜面 和 浮 贿 一 内 发 光 投影 
样式 (D): 内 利 面 。 混合 模式 @): 正常 ~ 混合 模式 (6): 正常 ~ 国 
方法 Q): 平时 ~ 不 透明 诬 (0): 60 % 不 透明 度 (0): 一 40  % 
深度 DT 全 100 % 杂 色 NG % a 
A OF ST ol 和 WN: |) wm 度 人 有 有人 
大 小 (D: (一 一 ES 像素 天 过 距离 (D): ES 了 像素 
TO 扩展 R): A 一 0 % 
注 (Q)， 子 加 : 
阴影 人 a | 大 小 5): 吗 一 一 18 像素 
角度 (N): Su 90 度 源 : © 居中 但) © 边 毕 (G) 
AD 
( 。 ) 回 使 用 全 局 光 (G) 阳 塞 (): 一 0 % 一 品质 
言 度 , 和 一 
高 朗 ”3 度 大 小 8}: 5S 一 一 3 人 素 言 线 : Ld 国 Be2 
光泽 等 高 线 : Pe 国 ET i i 
高 光 模式 (H): 正常 ~ 本 J. 杂 色 (N): (3 0 % 
: 高 线 : [A 口 湖 句 上 
不 透明 度 (0): se 已 100 % | 图 层 控 空投 县 ;(U) 
阴影 模式 (A)， 正常 ~ 国 范围 R): 5 ee 设置 为 默认 值 | [ 复位 为 默认 值 
不 通明 度 (CO): 一 0 一 一 各 % jh 人 0 
设置 为 默认 值 | | 复位 为 默认 值 设置 为 球 认 值 | | 复位 为 默认 什 














4-9 添加 图 层 样式 


UO 执行 确定 操作 后 的 图 像 如 图 
4-10 所 示 。 
(7 使 用 “直线 工具 ”绘制 直线 ， 如 
图 4-11 所 示 。 





图 4-10 图 像 效 果 图 4-11 绘制 直线 









































NS 一 渐变 亚 加 投影 
0 为 图 层 添 a 
46 |、 泪 和 全 描 十 /PY， 工党 Ee 混合 模式 (6): 正常 - 
轧 吧 | es a 不 透明 度 0): 一 Zs 一 一 
i se: 国 角度 (A): (RN\ 度 
辣 加 ”和 “投影 ”样式 ， i: | RA WN: 0。 度 四 全 8 全 yt(9 
样式 (DD): 线性 7” 财 与 图 层 对 齐 (0D 距 高 D: 一 一 1 外 素 


扩展 QR): 一 一 0 % 
大 小 (9): (= 0 像素 


品质 
等 高 线 : PE 口 湖 据点 (0 
杂 色 :CT 0  % 


图 层 挖 空 投 影 (U) 
设置 为 默认 值 复位 为 默认 值 





如 图 4 12 所 未。 角度 (): (1) 9 ”| 诬 
() 0O 执 行 确 定 缩放 (S): 一 一 一 一 一 100 史 
操作 后 的 


图 像 如 图 4-13 所 示 。 


















































4-12 添加 图 层 样 式 








图 4-13 图 像 效果 


10 (公关 全 是 月 而 故居 训 |] 为 图 层 添 加 “颜色 登 加 ”样式 ， 
如 图 4-14 所 示 。 如 图 4-15 所 示 。 





颜色 到 加 
颜色 


混合 模式 (8): 线性 加 深 ~ 国 国 








不 透明 度 (0): 全 45 吃 


取 赴 为 默认 值 县 位 为 喜 计 值 











图 4-14 绘制 矩形 图 4-15 添加 “颜色 又 加 ”样式 
Jy 执行 确定 操作 后 的 图 像 如 图 中 使 用 绘图 工具 绘制 图 形 ， 如 图 
4-16 所 示 。 a 














图 4-16 图 像 效 果 图 4-17 绘制 图 形 
14 选择 一 个 图 形 ， 为 图 层 添加 “内 阴影 ”“ 闫 色 半 加 ”和 “投影 ”样式 ， 如 图 
4-18 所 示 。 
内 阴影 
结构 
混合 模式 (6): 正常 ~ 国 国 


不 透明 度 (0): 一 40 % 


A ~N em sj 
角度 (A): \ Wy 90 ” 度 回 使 用 全 局 光 (G) 












































一 颜色 严 加 一 投影 
阻 (C): CR 0 oo Pe ; pe Es 
大 小 (S): OP 0 像素 混合 模式 (6): 正 晶 ” [| 混合 模式 {6): 正常 
a 不 透明 度 (0): se 100 % 不 透明 度 (O): mp5) % 
Rn. Pe 
_ 设置 为 默认 什 ] | 复位 为 和 全 角度 (AW): | | 50 度 已 使 用 全 局 兴 (6) 
高 线 : [A 局 泣 杀 锯 相 0 < 


距 高 D): 人 1 像素 
扩展 (R): SS 0 o0 


杂 色 (人 N): (= 0 o 

















设置 为 默认 值 复位 为 默认 值 大 小 GCC 0 像素 









































图 4-18 添加 图 层 样式 


SS 








photoshop 创意 移 pb 元 素 设 计 从 入 门 到 精通 





| 中 执行 确定 操作 后 ， 将 图 层 样 式 找 贝 并 粘贴 到 另外 两 个 图 层 上 ， 粘 贴 后 的 效果 如 
图 4-19 所 示 。 然 后 为 第 二 个 图 层 添 加 “投影 ”样式 ， 如 图 4-20 所 示 。 














混合 模式 6): 正常 -Nl 
十 透明度 {0): ET 30 De 


角度 A): ( 度 丫 司 用 全 局 兴 (6) 
wa 











图 4-19 粘贴 图 层 样 式 效果 图 4-20 添加 “投影 ”样式 


| O 执行 确定 操作 后 完成 制作 ， 最 终 效果 如 图 4-21 所 示 。 





4-21 最 终 效 果 


国 底部 标签 的 扩展 导航 

如 果 在 5 个 标签 中 有 一 个 标签 是 最 重要 或 最 频繁 使 用 的 ， 要 想 重点 突出 ， 可 以 使 用 变 
形 的 底部 标签 导航 ， 如 图 4-22 所 示 。 这 是 目前 很 流行 的 一 种 标签 导航 的 变 体 ， 若 页 面 中 
有 处 于 同一 层级 的 几 六 部 分 内 容 ， 同 时 又 需要 一 个 非 澡 重 要 且 频 繁 操作 的 入 口 ， 束 可 以 采 
用 这 种 APP 导航 样式 。 





德国 教 觉 山 优 雾 晚 收 甜 白 苑 
机 


r127 

到 全 杀生 
2 这 瓶 酒 性 价 比 确实 很 高 
综合 表现 均衡 有 淡淡 的 果 香 气息 能 
心 知 








图 4-22 底部 标签 的 扩展 导航 














01 





02 


Bi 


介绍 底部 标签 的 扩展 导航 的 制作 ， 图 4-23 所 示 为 制作 流程 图 。 





为 图 层 添 加 “ 摘 边 ”“ 内 阴影 ”“ 渐 变 登 加 ” 


4-23 制作 流程 图 


4-24 绘制 矩形 

















结构 
大 小 SG): C= 一 一 1 像素 
位 置 Pp): 外 部 

混合 模式 (6): 正常 v 

不 透明 度 (0): = 100 % 














填充 类 型 F): 颜色 ~ 一 
其 名 : 国 国 





设置 为 默认 值 复位 为 默认 值 











一 内 阴影 


Settings 


Settings 


工具 ”绘制 矩形 ， 如 图 4-24 所 示 。 








结构 
混合 模式 (6) 正常 ~ 国 国 
不 透明 度 (0): ”75 wo 


角度 (W): ( 上 ) 8 度 回 使 用 全 局 光 (G) 


中 高 D): 一 2 ”像素 
阻塞 (0): 2 100  % 
大 小 (3): 人 0 像素 






































等 高 线 : [A 消除 锯 占 中 


杂 色 (NI Ce 0 % 

















设置 为 默认 值 复位 为 默认 值 














一 渐变 到 加 





一 渐变 
混合 模式 (0): 柔 光 v | 仿 色 
不 透明 度 (P): = 97 % 


并: [>| 回 后 和 人 




















角度 NW: (| ) 0 度 
纺 波 8): 一 一 一 100 % 








样式 (0): 线性 回 与 图 层 对 齐名 





设置 为 默认 值 复位 为 默认 值 

















投影 





结构 
混合 模式 (6): 正片 到 底 ~ El 
不 透明 度 (0): 一 64 eo 


角度 (A): ( 1) -30 ” 度 回 使 用 全 局 光 (G) 


距离 O): 他 1 像素 
扩展 人 :CT 0 % 
大 小 (S): Z5 一 7 恤 素 


品质 


等 高 线 : Pg 消除 据 齿 () 


杂 色 (DC 0 % 












































避 图 层 控 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 














4-25 添加 图 层 样式 








“投影 ”样式 ， 如 图 4-25 所 示 。 


WS 








photoshop 创意 戎 pp 元 素 设 计 从 入 门 到 精通 





() I. 单 击 “ 确 定 ” 按 钮 后 的 图 像 效 末 如 图 4-26 所 示 。 





4-26 图 像 效 果 


()4 合用" 且 线 工具 ”绘制 朋 线 | 姻 图 4527 所 示 。 


4-27 绘制 直线 


() 站 为 图 层 添 加 “内 阴影 ”和 “渐变 三 加 ”样式 ， 如 图 4-28 所 示 。 











一 内 阴影 新 变 杰 加 
_ 结构 草 误 
混合 模式 (5): 正常 ~ _ 混合 模式 {0): 正常 r 站 仿 色 


六 :| | 瓜 向 () 


样式 (DD): 线性 ”中 与 图 层 对 齐 们 





不 通明 度 (0): 一 10 % 
角度 (A): 。 0 ” 度 门 使 用 全 局 光 (G) 
% 


距离 0): Ce 2 像素 
阻塞 (QO): 二 = 100 % 
大 小 (S): C0 像素 


高 绪 : PF 局 消除 锯 占 D 


杂 色 N): 一 0 % 
设置 为 默认 值 复位 为 默认 值 














EN): A on 章 
角度 舍 J 90 度 





第 放 介 一 
设置 为 默认 值 和 夏 位 为 默认 值 








一 品质 





























4-28 添加 图 层 样式 


() 0 执行 确定 操作 后 复制 图 屋 ， 并 调整 位 置 ， 如 图 4-29 所 示 。 


图 4-29 复制 并 调整 位 置 


() ' 使 用 绘图 工具 绘制 图 形 ， 如 图 4-30 所 示 。 








4-30 绘制 图 形 


() 8 为 图 层 添加 “内 发 光 ”“ 渐 变 妓 加 ”“ 投 影 ” 样 式 ， 如 图 4-31 所 示 。 












































内 发 光 渐变 到 加 投影 
结构 新 变 _ 结构 
混合 模式 (6): 正常 ~ 混合 模式 (0) 正常 ~ 由 | 仿 色 | 
zx 比 启 交工， 日- : : Es v | 
i 一 一 和 一 趟 透明 度 (p): 一 oh 混合 模式 人 6) 正 利 [ | 
杂 色 (人 N: = 一 ES Ci :py 
cS DT 渐变 ; [| 避 反 向 (R) 不 透明 度 (O): 国 [全 34 9 
一 样式 0 线性 ” 回 与 回忆 x 失信 角度 (A): ( |) 5 度 器 使 用 全 局 光 (G) 
方法 (Q): 条 和 角度 :人 /90 度 距离 D): 人 1 ”像素 
源 : 口 居 中 人 。 回 边 综 (6) 纺 抽 6): 一 一 100 % 扩展 R): 一 py 100 ”% 
阻塞 CC: 0 % . 
SEE ET 大 小 GS): 6 0 像素 




















图 4-31 添加 图 层 样式 


() 9 单 击 “ 确 定 ” 按 钮 后 的 图 像 效 果 如 几 4-32 所 示 。 





图 4-32 图 像 效 果 
| 0 使 用 “ 横 排 文字 工具 ”输入 文字 ， 如 图 4-33 所 示 。 人 然后 为 文字 图 层 添加 “投影 ” 
样式 ， 如 图 4-34 所 示 。 





TS 























混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (O): zy 100  % 
角度 (A): | “、) -45 度 器 使 用 全 局 光 (G) 
距 高 D): 下 2 像素 
扩展 (R): D100 。 % 
大 小 S: ee 0 像素 
4-33 输入 文字 图 4-34 添加 “投影 ”样式 


] ] 执行 确定 操作 后 的 图 像 效 果 如 图 4-35 所 示 。 然 后 用 同样 的 方法 绘制 其 他 图 形 并 
输入 文字 ， 如 图 4-36 所 示 。 


Settings 





4-35 图 像 效果 图 4-36 绘制 图 形 并 输入 文字 


| 出 使 用 “ 德 形 工具 ”绘制 矩形 ， 如 图 4-37 所 示 。 


Settings 





图 4-37 绘制 矩形 


Ts9 








更 辩 gU| Photoshop 创意 Oo, 元 素 设 计 从 入 门 到 精通 
m=/ 0 





| NN 
如 图 4-38 所 示 。 





“外 发 光 ” 和 “投影 ”图 层 样 式 ， 



















































































指 沪 渐变 要 加 图 案 到 加 
结构 渐变 图 案 
Sa GO 1 像素 人 垩 加 至 ee 混合 模式 (6): 亚 加 加 
位 置 (P): 内 部 ~ 不 透明 度 (P): B97 不 透明 度 (0M): 23 % 
混合 模式 (6)， 正 党 渐变 ; 日 团 反 向 (R) 
司 医 : v 点 
不 透明 度 (D): ZN 100  %% 样式 (): 团 与 图 层 对 齐 (1) 图 案 : FE 司 | 三 耻 呈 后 下 风 
填充 类 型 渐变 “~ Ji 上 
ee 缩放 (5): 75 100  %% 
ji EE [| 口上 ut 和 = 上 本 与 图 局 泣 扩 (9 
样式 (D): 线性 ~ 园 与 图 层 对 齐 (G) nn ; pT 
A |_ 设置 为 味 认 值 | | 复位 为 默认 值 | | [RE 
角度 (A): | ， ) 90 ” 度 回 仿 色 
缩放 (QO: = 100  % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
外 发 光 投影 
结构 结构 
混合 模式 {E): 正常 MA 混合 模式 (6): 正片 县 底 Md Eel 
A -Cl 不 通明 度 (0): sl % 
杂 色 (N): 人 0 % EE 
@ 回 . 前 度 (A): | Me | -90 度 门 | 司 用 全 局 光 (G) 
图 素 距离 (D0): 人 1 像素 
方法 (Q): 精确 扩展 (RR): 4 0 % 
扩展 (P): zy 100  % 大 小 (5): 下 4 像素 
大 小 (S): 4 1 像素 品质 
品质 
等 高 线 : } - 口 消除 锯 占 
等 高 线 : | | 辣 消除 锯齿 (0) 杂 色 (N): < oo 
范围 (R): % 
拉动 0): 6 0 % 团 图 层 挖 空 投影 (J) 
i | 设置 为 默认 值 | | 复位 为 默认 值 | 














图 4-38 添加 图 层 样式 


] /| 单 击 “确定 ”按钮 后 的 图 像 如 图 4-39 所 示 。 





图 4-39 图 像 效 果 


] 门 新 建 图 层 ， 绘 制 项 部 高 光 ， 如 图 4-40 所 示 。 





图 4-40 绘制 高 光 



































Settings 


Settings 


1b 再 次 使 用 “和 矩形 工具 ”绘制 矩形 ， 如 图 4-41 所 示 。 





图 4-41 绘制 矩形 
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| i 为 图 层 添加 “内 阴影 "“ 渐 变 合 加 ”“ 图 采 早 加 ”和 “投影 ”样式 , 如 图 4-42 所 示 。 

















内 阴影 

结构 

混合 模式 6@):， 正常 - 

不 通明 度 (0): D100 % 
角度 (A): (| 50 度 回 使 用 全 局 光 (G) 
距离 (0): < 1 像素 
阳 塞 人 0) 一 7” 48 % 
大 小 (5): 和 1 像素 

品质 
等 襄 纺 :| - 口 清 间 据 占 () 
杂 色 (N): 4 0 % 

设置 为 默认 值 ] [ 复位 为 默认 值 

















图 案 亚 加 
图 案 
混合 模式 人 @): 严 加 
不 透明 度 (Y): 区 16  % 
图 案 : Ee 避 
系 庆 全): Z5 100  % 
与 图 层 链 接 (K) 
设置 为 默认 值 复位 为 默认 值 











一 报 影 一 - 





渐变 台 加 一 
一 新 变 - 
混合 模式 (o)， 杰 加 ~ 辣 信 色 

不 透明 度 P): 一 7  % 


| 加 反 向 (R) 
样式 线性 = 团 与 图 忆 对 安信 
角度 M:( |) 50 度 





第 放 ): 二 也 一 一 100  %% 








芒 半 为 点 认 值 县 位 为 点 让 值 








站 构 - 六 
混合 模式 (6): 正常 ~ 国 国 


不 透明 度 (0): 2 34 % 


角度 :| ; |-50 。 度 回 使 用 全 局 光 人 


中 高 全 ): 5 "0 像素 设 
扩展 人 R): 二 100  % 


大 小 9): 一 1 像素 











图 4-42 添加 图 层 样 式 


| 8 执行 确定 操作 后 的 图 像 如 图 4-43 所 示 。 


Docs Settings 





图 4-43 图 像 效 果 


| O 使 用 绘图 工具 绘制 图 形 并 输入 文字 ， 添 加 图 层 样 式 后 的 效果 如 图 4 44 所 示 。 





Settings 


图 4_44 效果 
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notoshop 创 | ©@,, 元 系 设 计 从 入 1 到 | 米 
OO 





2 () 为 图 形 添加 “内 发 光 ”“ 渐 变 释 加 ”和 “投影 ”图 层 样式 ， 如 图 4-45 所 示 。 












































结构 
混合 模式 6)， 正常 a 
Se 混合 模式 (0)， 权 加 > 口 f 色 
杂 色 (N): 5 不 通明 度 P): 一 2 一 一 2 % 
5 图 :MM | YR) 
和 样式 Q)， 线性 ~ 团 与 图 层 对 齐 ( 
方法 (Q): 柔和 7 ee 
源 :器 居中 (5) 。 回 边 媒 (6) 2 2 
阻塞 (c): < 0 | 设置 为 默认 值 | | 复位 为 默认 值 | 
大 小 (5): 本 5 
把 影 
车 构 
:长 合 模式 押 ): 强 光 ™ 
不 透明 度 (0): 二 50 % 
角度 :| 上 30 度 回 使 用 全 局 光 人 
距离 人 D): 本 "2 像素 
扩展 (R): 2 00 % 
大 小 (8): (一 0 像素 
图 4-45 图 形 的 图 层 样式 
ey 为 文字 添加 “投影 ”图 层 样式 ， 
结构 2 | 体 参数 如 图 4-46 所 示 。 
六 全 模式 加， 正常 使 用 “ 箱 形 工具 ”绘制 矩形 ， 并 填 
Cd 人 六 交 色 ,如 图 4 所 所 
ls, 全 全 9 中 由 亲生 外。 
角度 (A): | *， | 90 麻 站 使用 全 局 光 (6) 
中 高 人 D): 上 1 元 过 
扩展 从) [| 100 0 
太 小 (5): 5 0 像素 i Docs Settings 








图 4-46 文字 “投影 ”样式 参数 






3 将 图 层 向 下 移动 几 层 ， 如 图 4-48 所 示 。 | = 
24 完成 效果 后 可 以 添加 到 APP 界面 的 底部 ， 如 图 | 二 Ra 


4—49 所 示 O Jane Doe 


Docs Settings 





4-48 调整 图 层 顺 序 图 4-49 添加 到 APP 界面 的 
底部 








6 顶部 标签 导航 

将 标签 放 到 界面 的 上 方 就 会 形成 常见 的 顶部 标签 导航 ， 如 图 4-50 所 示 。 目 前 ， 顶 部 
标签 导航 在 APP 中 一 般 当 作 二 级 导航 。 顶 部 标签 导航 应 用 于 多 种 情景 下 ， 可 以 固定 数量 ， 
展示 有 限 的 几 个 标签 ， 也 可 以 扩大 一 定 的 数量 ， 变 成 向 左 滑动 展现 更 多 标签 

既然 我 们 习惯 于 从 上 到 下 浏览 手机 屏幕 放 在 屏幕 项 部 自然 有 一 定 的 优势 标签 页 和 和 
每 个 控制 中 心 独 有 的 图 标 是 这 种 布局 最 重要 的 代表 。 顶 部 菜单 和 底部 的 意义 差不多 ， 即 把 
菜单 放 在 顶部， 可 以 遵循 由 上 至 下 的 阅读 习惯 。 


«» 





4-50 顶部 标签 导航 


下 面 介 绍 项 部 标签 导航 的 制作 ， 图 4-51 所 示 为 制作 流程 图 。 


WwW 
ss 
© 


4-51 制作 流程 图 


() | 使 用 “ 圆 角 窍 形 工具 ”绘制 圆 角 答 形 ， 如 图 4-52 所 示 。 


4-52 绘制 圆 角 和 矩形 
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0 » Boi | a a Do a SE i 
影 ” 参 数 ， 如 图 4-53 所 示 。 





























指 边 一 内 阴影 一 一 
大 小 56): CT ”像素 混合 模式 (8) 正常 四 
位 置 p): 外 部 ~ 不 透明 度 O): 一 一 询 % 

混合 模式 6):， 正 党 和 角度 (A): (~ 】 J。 度 团 合用 全 局 %(6) 
站 0 

辐 局 H SN 

不 于 9 人 5 “有 距离 0): A 二 一 了 像素 

















阻塞 (QO: CT 0 % 
大 小 (S): 1 像素 


-一 
等 高 线 : [A 消 绿 锯 具 
杂 色 (NN): (= 一 0 % 


设置 为 默认 值 复位 为 默认 值 





一 填充 类 型 P): 颜色 ~ 
训 : 国 国 












































设置 为 默认 值 复位 为 默认 值 


































































































一 渐变 一 加 5; 
渐变 [到 
混合 模式 (o): 正常 ~ 辣 仿 色 一 结构 
不 透明 度 (P): = % 混合 模式 (6): 正常 ~ 国 国 
= | [el 和 、 = 
渐变 反 向 (R) 不 透明 度 (0): 三 2 一 一 全 22  % 
样式 (): 线性 ~ 园 与 图 层 对 齐 人 py 
i 角度 (A): | 、 120 ” 度 同 使 用 全 局 光 (G) 
"i g a 
缩放 G): 79 一 ”100 % 距离 DO): (一 一 2 像素 
设置 为 默认 值 | | 复位 为 点 认 值 扩展 (R): G 0 % 
大 小 (5): 一 一 4 像 吉 
j 














4-53 添加 图 层 样式 


(})3 蛙 击 “确定 ”按钮 后 的 图 ()4 使 用 “和 窍 形 开 具 ” 绘 制 矩 形 ， 如 
图 4-55 所 示 。 


像 效 果 如 图 4-54 所 示 。 





图 4-54 图 像 效 果 4-55 绘制 矩形 


() ” 为 图 层 添加 “内 阴影 ”“ 户 变 破 加 ”和 “投影 ”样式 ， 如 图 4-56 所 示 。 






























































































































































三 内 阴影 一 渐变 到 加 投影 
一 结构 - 一 新 变 - 0 
混 全 模式 E)， 正 党 Mo 混合 模式 (0): 正常 -| 回 以 色 混合 模式 四)。 正常 
透明 度 (D): # zs = ` 透 明度 (0): 一 > % 
不 透明 度 (0) 33 % 不 透明 度 (P): ee NA 1 00 oh 不 透明 度 (D) 全 75 
角度 (A): W120 度 回合 用 全 局 光 (6) 渐变 : [网 反 向 R) 角度 (A): e120 度 辐 使 用 全 局 光 (G) 
中 高 D): 一 2 像素 样式 (): 线性 ~ 加 与 图 层 对 齐 (0 FS 人 1 人 
阻塞 (CO): (Fs 0 oo AN 扩展 (R): (= 0 oo 
大 小 3): PS 6 像素 角度 (N): | | J 90 度 大 小 Si: (一 0 像素 
品质 缩放 人 ): = 100  % 品质 
Si A"| Da 设置 为 默认 值 [复位 为 加 认 值 wt A Psst 
杂 色 (NN): (一 0 % 杂 色 (N): ( 0 % 
设置 为 默认 值 | [ 复位 为 默认 值 图 层 挖 空投 味 () 
= - [设置 为 默认 值 | [ 复位 为 默认 值 














4-56 添加 图 层 样式 


() 单 击 “ 确 定 ” 按 钮 后 的 图 像 如 图 () IW 使 用 “和 矩形 工具 ”绘制 窍 形 ， 
4-57 所 示 。 如 图 4-58 所 示 。 


ll  . 


图 4-57 图 像 效 果 4-58 绘制 矩形 
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() 8 为 图 层 添 加 “颜色 登 加 ”和 “渐变 县 加 ”图 层 样 式 ， 如 图 4-59 所 示 。 
































颜色 亚 扣 -一 渐变 亚 加 
新 色 渐变 
混合 模式 (D): 正常 v 回访 色 
混 癌 模式 (6):” 又 加 ~ 国 国 不 遂 明 度 p): 一 100 % 

不 透明 度 (Oj: 一 = 一 42  %% 新 变 : 一 ]z] 癌 反 向 R) 

样式 (LD): 线性 ”| 与 图 层 对 齐 (1) 

设置 为 默认 值 复位 为 默认 值 Ag (MN) 
yy 
缩放 (5): = 100 % 











设置 为 默认 值 复位 为 默认 值 


























图 4-59 添加 图 层 样 式 


() 执行 确定 操作 后 的 图 像 如 图 4-60 所 示 ， 然 后 使 用 “直线 工具 ”绘制 两 条 直线 ， 
分 别 填充 颜色 #cfcecc 和 #ffffff， 如 图 4-61 所 示 。 


4-60 图 像 效果 图 4-61 绘制 直线 
复制 直线 到 另 一 侧 ， 如 图 | ] 使 用 “ 横 排 文学 工具 ”输入 
4-62 所 示 。 文字 ， 如 图 4-63 所 示 。 





[er nn 


图 4-62 复制 直线 4-63 输入 文字 


] » 为 文字 图 层 添加 “内 阴影 ”“ 闫 色 县 加 ”和 “投影 ”样式 ， 如 图 和-64 所 示 。 












































一 内 阴影 颜色 亚 加 投影 
革 颜色 结构 
混合 模式 (5) 正常 - Em 一 混合 模式 Bj: 正常 vv[ 
角度 (上 ) 加 度 加 仙人 yt rig - a 角度: (| ) 页 度 回合 有 全 局 光 人 
距离 D): 全 1 像素 设置 为 默认 值 复位 为 默认 值 距 高 D: 一 一 1 像素 
大 小 (9): C= 0 像素 大 小 (S): SS 0 | 像素 
























































4-64 添加 图 层 样式 


] 3 复制 多 个 图 层 并 调整 位 置 ， 如 图 4-65 所 示 。 

op 
提示 : 景 后 可 尺 
根据 实际 需要 对 








图 4-65 复制 并 调整 位 置 
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| 复制 文字 到 中 间 的 蓝 色 区 域 上 ,并 为 文字 图 层 添加 “颜色 闭 加 ”和 “投影 ”样式 ， 
如 图 4-66 所 示 。 














一 投影 
颜色 人 
a 本 混合 模式 (8) 正常 ~ 加 到 
混 言 模式 (6): 正常 | | 不 通明 度 (0): 一 7 一 6” % 
不 透明 度 (0): se 100  % 角度 (A): (4) 50 。 度 回 使 用 全 局 光 (G) 











一 : 一 中 高 D): 一 一 1 像素 
及 置 为 默认 值 收 位 为 默认 值 扩展 人 = Ce [| 


大 小 个 ): CPO 像素 


























图 4-66 添加 图 层 样 式 


] 0 nena 





4-67 完成 效果 


| Ob 选择 “ 椭 

了 
住 Shift 键 绘制 正 圆 ， 
如 图 4-68 所 示 。 





4-68 绘制 正 圆 


] 为 图 层 添 加 “内 阴影 ”“ 渐 变 登 加 ”和 “投影 ”样式 ， 如 图 4-69 所 示 。 














































































































一 内 阴影 ”渐变 亚 加 投影 
a 一 省 构 9 
混合 模式 (5): 正常 ~[L ] 人 pn 混合 模式 (6)， 正常 - Ey 
不 透明 度 O): 一 75 % et de 不 通明 度 (0): 一 人 27  % 
A F 100 AN 
和 角度: [、 ) 120 ” 度 加 使 用 全 局 光 (G) i | 0 负 度 人 N: 【 、 135 度 回合 用 全 局 (6) 
距离 D): 一 一 1 借 素 一 一 一 中 高 D: 一 一 一 一 1 你 
. Fe i , 
大 小 5): 一 一 0 像素 角度 :| | 50 ” 讼 大 NS 2。 铺 素 
— 品质 
四 i ss | "| sts 
| "| statist) FE Se ji- 一 
有 设置 为 由 认 值 | [ 复位 为 默认 值 EN: 0 % 
H ”~ 
各 团 图 层 挖 空 投影 (U) 
设置 为 默认 值  [ 复位 为 点 认 值 设置 为 默认 信 ] [ 复位 为 默认 入 














图 4-69 添加 图 层 样式 


| 单 击 “确定 ” 
按钮 后 的 图 
像 如 图 4-70 所 示 。 





4-70 图 像 效 果 


19 使 用 “ 横 排 
输入 文字 ， 如 图 4-71 所 


No 





图 4-71 输入 文字 











探 时 
车 攀 


混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): = 50  %% 
角度 (A): | 1 120 ” 度 园 使 用 全 局 光 人 四 





2 () 为 文字 图 层 添加 “投影 ” 样 

式 ， 如 图 4-72 所 示 。 
几 | 单 击 “确定 ”按钮 完成 导航 
的 制作 ， 最 终 效 果 如 图 4-73 





中 高 D0): :二 = |1 却 壶 
扩展 (R): 届 ee 0 | 绽 
大 小 Ge | 盐 喜 














图 4-72 添加 “投影 ”样式 图 4-73 最 终 效 果 


(CE 油 尼 式 导航 


抽 居 式 导 航 也 称 扩展 式 导航 ， 抽 居 式 导航 是 将 菜单 隐藏 在 当前 页 面 后 ， 点 击 导航 入 口 
即 可 像 拉 抽 必 一样 拉 出 菜单 。 这 种 导航 的 核心 思想 就 是 隐藏 ， 将 最 主要 的 信息 显示 在 界面 
上 ， 而 将 非 核心 的 信息 隐藏 。 
(网 抽 导 式 导航 的 优 缺 点 
下 面 列举 了 抽 屈 式 导 航 的 优 缺 点 。 
名优 点 和 


节省 屏 才 空间 ， 让 导航 “ 藏 ”在 侧 请 抽 屠 里 ， 释 放 了 更 多 的 空间 给 主要 内 容 。 
让 用 户 将 更 多 的 注意 力 聚 焦 到 当前 页 面 ， 比 较 适 合 不 那么 需要 频 索 切换 内 容 的 

应 用 ， 例 如 对 设置 、 关 于 等 内 容 的 隐藏 。 

能 够 提供 在 非 项 级 视图 间 导 航 的 能 

主 界面 和 内 容 界 面 的 层级 关系 减弱 ， 一 一 对 应 关系 更 强 。 


由 于 入 口 为 一 个 小 图 标 ， 使 得 导航 的 可 发 现 性 低 。 
大 部 分 操作 项 目 均 为 隐藏 状态 ， 用 户 需 要 一 定 的 记忆 成 本 。 
对 排版 和 设计 要 求 高 ， 如 果 导 航 选 项 多 、 层 级 结构 深 ， 在 使 用 过 程 中 就 需要 不 
断 在 导航 选项 间 进 行 切换 操作 ， 需 要 频繁 地 从 低层 级 页 面向 高 层级 页 面 跳 转 。 
容易 与 应 用 内 的 其 他 交互 模式 冲突 ， 例 如 侧 滑 手势 操作 。 
对 于 需要 经 常 在 不 同 导航 间 切 换 或 者 核心 功能 有 一 堆 入 口 的 APP 不 适用 。 

团 抽 尼 式 导航 的 类 型 

抽 居 式 导航 分 为 很 多 类 ， 下 面 进行 简单 介绍 。 





型 一 :如 图 474 所 示 ， 内 容 为 一 层 ， 导 航 为 一 层 ， 内 容 层 窗 蓄 在 导航 层 上 。 
型 二 : 如 图 4-75 所 示 ， 导 航 和 内 容 为 同一 层级 。 
关 型 二 ;如 图 4-76 所 示 ， 内 容 层 在 下 面 ， 导 航 选 项 缆 关 在 内 容 上 ， 并 弱化 了 


内 容 的 抽 屠 形式 。 


关 
类 
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让 我 们 聊 





今日 一 刻 





往 期 内 容 
热门 作者 
栏目 浏览 
我 的 喜欢 


设置 




















4-74 类 型 一 


全 11:227 AM 


Home 
局 Mentions 
习 Messages 
了 Favorites 
Q Search 
® Muffles 


OO Today 


习 Advanced Features 


图 4-75 类 型 二 图 4-76 类 型 三 
美 型 门 : 如 图 4-77 所 示 ， 将 内 容 层 缩小 ， 或 扭曲 缩小 内 容 。 


下 午 237 使 了 百 记 56% 本 了 





op 


:e!@@ :OO00 


图 4-77 类 型 四 


\ 


从 提示 : 如 果 希 望 设 计 出 
点 ， 需 要 注意 提供 菜 


训 
单 滑 出 的 过 渡 动 画 ， 如 图 4-78 
所 


READIMORE | 





图 4-78 过 渡 动 画 
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E 革 制作 抽 导 导航 
下 面 介绍 抽 层 导航 的 制作 ， 图 4-79 所 示 为 制作 流程 图 。 


11:14 PM 


11:14 PM 


新 闻 


照片 & 视 频 


好 友 


统计 








图 4-79 制作 流程 图 





新 建 空白 文 建立 参数 线 ， 确 定 顶 在 右 侧 添 加 
档 ， 为 背景 填 部 状态 栏 和 右 侧 区 域 制作 好 的 图 
允 深 题 色 ， 如 图 4-80 的 位 置 ， 垂 直 的 为 540 px、 水 ， 片 ， 如 图 4-82 所 示 。 
所 示 。 平 的 为 40 px， 如 图 4-81 所 示 。 





4-80 填充 背景 4-81 建立 参考 线 4-82 添加 图 片 
在 状态 栏 中 绘制 图 形 并 输入 文字 ， 使 用 “椭圆 工具 ”绘制 
如 图 4-83 所 示 。 正 圆 ， 如 图 4-84 所 示 。 


11:14 PM 


11:14 PM 








4-83 绘制 图 形 并 输入 文字 4-84 绘制 正 圆 


MA 


| ,合川 二 \ DD 证 和 
1 ) 巴 J 辣 、 ©@ | 请 PS | | A 人 | J al 小 月 人 3 








为 图 层 添加 “ 摘 边 ”图 履 样 陈 ， 执行 确定 操作 后 的 图 像 效 果 如 图 
如 图 4-85 所 示 。 4-86 所 示 。 
11:14 PM 100% 国画， 
大 小 (5S): 屋 - 像素 
位 置 (P): 内 部 
混合 模式 (6): 正常 M 
不 透明 度 (0): = 100 % 


填充 类 型 F): 颜色 ~ 














颜色 : 
| 设置 为 默认 值 。| |， 复位 为 默认 值 
图 4-85 添加 “ 描 边 ”图 层 样 式 图 4-86 图 像 效果 
拖 入 素材 图 片 ， 调 整 大 小 后 创 使 用 绘图 工具 绘制 图 形 ， 如 图 
建 前 贴 蒙 版 ， 如 图 4-87 所 示 。 4-88 所 示 。 





TTTT 11:14 PM 


11:14 PM 100% i 





图 4-87 拖 入 素材 并 创建 剪贴 蒙 版 


使 用 “椭圆 工具 ”绘制 贺 ， 并 使 用 “ 横 排 文 M114PM 0% 

字 工 具 ” 输 入 文字 ， 如 图 4-89 所 示 。 

使 用 “直线 工具 ”绘制 直线 , 填充 颜色 为 白色 、 

不 透明 度 为 15%， 并 复制 多 个 进行 居中 对 章 ， 
如 图 4-90 所 示 。 





11:14 PM 





4-89 输入 文字 4-90 绘制 并 复制 直线 





及 绘制 定形 ， 设 症 Nin 使 用 “ 模 排 文字 14 本 必 让 全 ml 交 


a 册 过 


填充 颜色 为 黑色 、 几时 人 疹 次 刘 池 ， 
不 透明 度 为 10%， 如 图 4-91 如 图 4-92 所 示 。 成 了 导航 的 制作 ， 效 果 如 图 
4-93 所 示 。 





图 4-91 绘制 矩形 图 4-92 输入 文字 图 4-93 完成 效果 


(了 EB 合格 式 导航 


我 们 每 天 接触 的 最 多 的 就 是 宫 格 式 导 航 ， 它 应 用 于 手机 主屏 ， 如 图 4-94 所 示 。 每 一 
个 APP 都 是 一 个 定格 , 这 些 定格 聚集 在 中 心 贝 面 , 用 户 只 能 在 中 心 幢 面 进入 其 中 一 个 定格 ， 
如 果 想 进入 另 一 个 宫 格 ， 必 须 先 回 到 中 心 页 面 ， 再 进入 男 一 个 宫 格 。 每 个 定格 相互 独立 ， 
它们 的 信息 之 间 也 没有 任何 交集 ， 无 法 跳 转 互通 。 因 为 这 种 特质 ， 写 格 陈 导航 被 广泛 应 用 
于 各 平台 系统 的 中 心 页 面 。 

目前 ， 在 APP 界面 中 使 用 宣 格 陈 导 航 作 为 主导 航 的 很 少 ， 稼 见 的 只 有 美 图 秀 秀 ， 如 
图 4-95 所 示 。 






E 


| 
拼图 万 衣 相 机 
b= ' - 
一 一 


EE 


图 4-94 系统 桌面 图 4-95 美 图 秀 秀 





| 













更 哆 2U Photoshop 创意 A 元 素 设 计 从 入 门 到 精通 
m=/ 0 





富 格式 导航 占据 人 全屏， 类似 于 堆砌 色 块 ， 它 适合 入 口 相互 独立 互 斥 ， 且 不 需要 交叉 使 
用 的 信息 归 类 ， 如 图 4-96 所 示 。 在 页 面 间 切 换 时 ， 每 次 要 重复 进入 页 面 A 一 退出 到 主导 
航 页 面 一 进入 页 面 B。 
i 提示 : 在 设计 时 切忌 不 
分 青红皂白 地 去 使 用 色 
彩 ， 这 可 能 会 让 用 户 不 知 所 措 和 
产生 疲倦 感 。 















图 4-96 宫 格 导航 


国 优点 





@ 将 主要 入 口 全 部 聚集 在 一 个 界面 ， 导 航 清 晰 易 懂 、 显 而 易 见 ， 方 便 用 户 做 出 选 
择 ， 并 能 提高 效率 。 
@@ 容易 记 住 各 入 口 位 置 ， 方 便 快速 找到 。 


国 缺点 


右 页 面 之 间 切 换 频 楷 ， 需 要 多 次 重复 地 回 到 主导 航 页 面 ， 此 导航 无 法 在 多 入 口 
间 灵 活 跳 转 ， 不 适合 多 任务 操作 。 

这 样 的 组 织 方式 无 法 让 用 户 在 第 一 时 间 看 到 内 容 ， 选 择 压力 较 大 。 

容易 形成 更 深 的 路 径 。 

不 能 显示 太 多 入 口 次 级 内 容 。 

从 目前 来 说 ， 这 种 导航 模式 越 来 越 少 用 在 一 级 导航 。 不 过 在 二 级 导航 中 ， 作 为 
一 系列 工具 入 口 的 聚集 ， 或 作为 内 容 列 表 的 一 种 图 形 化 呈现 形式 ， 还 是 存在 于 
各 种 APP 里 的 。 




















男 外 ， 写 格式 导航 还 有 一 种 变 式 ， 即 
“跳板 式 ”， 如 图 4-97 所 示 。 








图 4-97 宫 格 导航 的 变 式 








(“722 列表 式 导航 


刘表 式 导航 是 我 们 在 APP 设计 中 必 不 可 少 的 一 个 信息 承载 模式 ， 当 然 ， 作 为 一 个 
APP 的 导航 也 是 非常 方便 的 。 这 种 导航 模式 吓 将 多 个 列表 左 对 齐 展示 ， 增 加 辣 右 壬 头 表明 
是 否 还 有 下 级 ， 如 图 4-98 所 示 。 


2-48 AM 





> Reeder 
> All liems > 
? : Shared 
> 

Notes 和 
> 

Fokders 
> 

Apple 
> 

Design 

Blogs 


iPhone 


图 4-98 列表 式 导 航 


从 目前 来 看 ， 列 表 式 导航 通常 用 于 二 级 页 ， 由 于 它 与 宫 格 导航 一 样 不 会 默认 展示 任何 设 
实质 内 容 ， 所 以 通常 APP 不 会 在 首页 使 用 它 。 

Oe eT | i i an 
所 以 用 户 使 用 起 来 不 会 觉得 困难 。 设 计 师 们 通 过 深 亮 的 配色 、 图 标 组 合 来 设计 ， 使 
得 菜单 更 加 美观 ， 如 图 4-99 所 示 。 














Super Startup 





图 4-99 列表 式 导 航 
下 面 下 举 列表 式 导 航 的 优 缺 点 。 


国 优 点 
© 这 种 导航 结构 清晰 、 易 二 用户 理解 、 高 效 ， 能 够 帮助 用 户 快速 定位 到 对 应 的 
页 面 。 
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Photoshop 创意 








二 pp。 元 素 设 计 从 入 门 到 精通 





”列表 项 目 可 以 通过 间距 、 
”可 展示 内 容 较 长 的 标题 。 
@@ 可 展示 标题 的 次 级 内 容 。 





国 钠 点 





当 同 级 内 容 过 多 时 ， 用 户 浏 览 容 易 


标题 等 进行 分 组 。 


AS 


生 疯 


十 


= 


oO 


只 能 通过 排列 顺序 、 颜 色 来 区 分 各 入 口 的 重要 程度 。 


@ 
© 排版 灵活 性 不 是 很 高 。 
© : 





国 制作 列表 式 导航 


下 面 介 绍 列 表 式 导航 的 制作 ， 图 4-100 所 示 为 制作 流程 图 。 





() ] 使 用 “和 窍 形 工具 ”绘制 矩形 ,如 图 4-101 所 示 。 然后 为 图 层 设 置 “ 外 友 光 ”和 “ 投 


图 4-100 制作 流程 图 


影 ” 样 式 ， 如 图 4-102 所 示 。 














外 点 光 
结构 


混合 模式 {E): 正常 


3 


不 透明 度 D): = 他 13 








图 素 
方法 0): 对 和 > 
扩展 P): Cc 一 一 0 
大 小 人) 18 
品质 
等 高 线 : | 人 | 口 潮 $ 蚀 占 (0 
记 围 (R): A 50 





拉动 0): G 


0 




















投影 
一 结构 
混合 模式 (6): 正片 到 底 ~ 国 国 
不 透明 度 (D): ES 73 |% 
角度 (A): (| 】50 度 回 使 用 全 局 光 (G) 
中 高 D): 一 1 ” 佛 素 
扩展 人 R): 4 0 % 
四 | 大 小 (5): 后 3 像素 
像素 品质 
高 线 : [4 "| 口 消 绿 锯 占 0 
杂 色 (N): 4 % 
团 图 层 控 空投 影 (J) 
[设置 为 默认 值 | [ 复位 为 默认 值 





| 设置 为 默认 值 | | 复位 为 默认 值 | 














图 4-101 绘制 矩形 





图 4-102 添加 图 层 样式 











() » 设置 后 效果 如 图 4-103 所 示 。 然 后 使 用 “矩形 工具 ”绘制 窍 形 , 并 填充 颜色 为 灰色 ， 
如 图 4-104 所 示 。 





图 4-103 设置 效果 图 4-104 绘制 矩形 


03 找 贝 矩形 1 的 图 0 hd loon 、05 使 用 绘图 工具 给 
层 样式 ， 粘 贴 到 并 修改 其 制图 形 ， 并 使 用 


定形 2 上， 完成 效果 如 图 ”的 颜色 为 监 色 ， nl 4-106 ““ 圆 角 和 矩形 工具 ”绘制 圆 角 





4 ] 吕 所 寺 所 示 。 矩形， 如 网 4-107 所 示 。 
图 4-105 粘贴 图 层 样 式 效果 图 4-106 复制 矩形 图 4-107 绘制 图 形 


() 为 圆 角 矩形 图 层 添 加 “内 阴影 ”和 “投影 ”样式 ， () 网 单 击 “ 确 定 ” 近 
如 图 4-108 所 示 。 钮 后 的 图 像 如 图 
4-109 所 示 。 




















内 阴影 投影 
结构 结构 
混合 模式 (6)， 正片 委 底 - Em EE " 
不 透明 度 (0): = 26 听 不 透明 度 (0): 5 15  % 
角度 (3): | | 8 府 回 使 用 全 局 光 (G) 角度 A:( 1s0 ， 度 回 使 用 全 局 光 (G) 
距离 (0): 5 1 像素 
i i = Es 扩展 R): =py 100  % 
SE 大 小 (5): G 0 ”像素 





pd HH Ek 像素 
品质 


等 高 线 : | - 器 湖 逐 据 齿 人) 
各 :| - 喇 消 除 锯 上 杂 色 N: 4 一 一 


周 图 层 挖 空 投影 (U) 
| 设置 为 默认 值 。| | 复位 为 默认 值 | 设置 为 默认 值 复位 为 默认 值 


品质 


杂 色 (N): G 0 % 


























图 4-108 添加 图 层 样 式 图 4-109 图 像 效果 


IS 





Photoshop 创意 @ pp 元 素 设计 从 入 门 到 精通 








() 用 同样 的 方法 绘制 图 形 ， (9 使 用 “ 横 排 文字 工具 ” 输 
如 图 4-110 所 示 。 


> 











图 4-110 绘制 图 形 图 4-111 输入 文字 
10 使 用 绘图 工具 绘制 图 形 ， | | 使 用 “ 横 排 文字 工具 ”输入 
us a a 文字 ， 完 成 效果 如 图 4-113 
所 示 。 
图 4-112 绘制 图 形 图 4-113 完成 效果 


OZEB 混合 组 合 导航 


当 用 户 需 要 聚焦 内 容 同 时 又 需要 
一 些 快捷 入 口 连接 到 某 些 页 面 时 就 可 
以 采用 组 合 导 航 。 组 合 导 航 一 般 上 方 
用 号 格 的 形式 展现 快捷 入 口 ， 与 标签 
导航 不 同 的 是 ， 这 些 富 格 入 口 之 则 不 
需要 是 平 级 的 关系 ， 也 不 必 包 含 整个 
层级 的 内 容 ， 可 以 将 它 理 解 为 一 种 图 
[yr me et 
速 调 整 ， 如 图 4-114 





所 示 。 











下 面 介绍 组 合 导 航 的 设计 制作 ， 图 4-115 所 示 为 制作 流程 图 。 





() elo Losnow lt 
材 图 太 贞 员 剖 前 康 包 | 罗 
日 色 ， 使 用 “ 圆 角 算 形 工具 ”绘制 
圆 角 和 矩形， 如 图 4-116 所 示 。 
U7 使 用 “ 圆 角 矩形 工具 ” 
绘制 填充 闫 色 为 监 色 的 
册 角 矩形， 如 图 4-117 所 示 。 





(})3 使 用 “和 窍 形 工 具 ” 绘 制 
多 个 窍 形 ， 并 修改 不 同 
的 闫 色 ， 然 后 绘制 图 形 并 输入 文字 ， 

如 图 4-118 所 示 。 
()4 使 用 “椭圆 工具 ”绘制 
正 圆 ， 如 图 4-119 所 示 。 


(})D 为 图 层 添 加 “ 摘 边 ”样式 ， 
如 图 4-120 所 示 。 

(0 拖 入 系 材 图 片 ， 纵 小 后 

创建 叉 贴 绽 版 ， 效 果 如 


图 4-121 所 示 。 





图 4-115 制作 流程 图 








snowangel 
9 长 沙 . 湖 南 





图 4-116 绘制 圆 角 和 珑 形 图 4-117 绘制 圆 角 和 珑 形 


图 4-118 绘制 图 形 并 输入 文字 图 4-119 绘制 正 圆 














描 边 
结构 
大 小 G): 正 5 像素 
位 置 p): 外 部 
混合 模式 (6): 正常 M 
不 透明 度 (O): 万 50  % 





填充 类 型 F): 颜色 ~ 
颜色 ; 





| 设置 为 默认 值 | | 复位 为 默认 值 | 








图 4-120 添加 “ 描 边 ”样式 


图 4-121 拖 入 素材 并 
创建 剪贴 蒙 版 


ye 





Photoshop 创意 .0 PP 元素 设 计 从 入 门 到 精通 








U 7/ 使 用 绘 具 在 顶部 绘制 图 
2 pn 如 图 4-122 


所 示 。 





图 4-122 绘制 图 形 并 输入 文字 


() 9 确定 后 的 图 像 效 果 如 图 4 124 
所 示 。 





图 4-124 图 像 效 果 





图 4-126 绘制 矩形 





08 





使 用 “椭圆 工具 ”绘制 填 元 
颜色 为 红色 的 正 圆 ， 将 其 回 





下 移动 一 层 , 并 为 图 层 添加 “ 摘 边 ”样式 ， 
如 图 4-123 所 示 。 


10 





描 边 
结构 
大 小 人 ): A | 了 像素 
位 置 P): 四 部 
混合 模式 公 ): 正常 了 
不 透明 度 (0): py 10 % 


填充 类 型 F): 颜色 ~ 
颜色 : Ml 





[设置 为 默认 值 | [ 复位 为 默认 值 








图 4-123 添加 “ 描 边 ” 样 式 


使 用 “ 模 排 久 也 亚 上 其 "在 尖 
像 下 方 输入 文字 ， 并 绘制 图 


形 ， 如 图 4-125 所 示 。 


] ] 
Mw 





snowangel 
9 长 沙 . 湖 南 


图 4-125 绘制 图 形 
使 用 “和 矩形 工具 ”绘制 填充 颜 色 
为 白色 的 矩形 , 如 图 4-126 所 示 。 
使 用 绘图 工具 绘制 图 形 并 输入 
文字 ， 如 图 4-127 所 示 。 


地 点 





图 4-127 绘制 图 形 并 输入 文字 


| 3 使 用 “椭圆 工具 ”绘制 圆 ， 然 后 添加 “ 摘 边 ” 
图 层 样式 ， 添 加 素材 图 片 并 创建 醚 贴 蒙 版 ， 

如 图 4-128 所 示 。 

] /| 完成 的 最 终 效 果 如 图 4-129 所 示 。 


snowangel 
9 长 沙 . 湖 南 
地 点 | 
岳 篇 山 
长 沙 世界 之 窗 和 
岳 蔓 山 
长 沙 世界 之 窗 
东方 明珠 , 上 海 S 


Dae 东方 明珠 ,上海 





图 4-128 添加 图 片 并 创建 剪贴 蒙 版 图 4-129 完成 效果 


(“了 EZ 滑动 式 导航 


滑动 陈 导 航 是 为 频繁 操作 而 设计 的 。 导 航 并 不 一 定 只 发 生 在 功能 项 之 间 ， 例 如 新 闻 关 
应 用 需要 在 不 同类 别 的 新 闻 之 间 进 行 切换 浏览 ， 如 图 4-130 所 示 。 通 前 来 说 ， 这 种 切换 
的 频率 要 比 功能 项 的 切换 频率 更 高 ， 切 换 项 的 数量 也 会 比较 多 ， 用 户 通过 在 内 容 页 面 左右 
滑动 手指 即 可 在 不 同 的 类 别 之 加 进行 切换 。 








@ 优点 : 通过 滑动 手指 实现 切换 ， 用 户 w E 
体验 好 ， 尤 其 在 连续 切换 时 其 操作 方 aaa 下 
SS S NT 给 恩 递 水 杯 画 
式 的 连续 性 比较 强 ， 主 体 页 面 的 过 渡 oD < 
也 更 加 平滑 , 会 产生 更 加 流畅 的 体验 。 PT 
@ 卖点， 一 次 滑动 只 能 切换 到 相 邻 的 类 RT 
别 ， 要 想 直接 切换 到 对 应 类 别 可 以 点 区 双 a 








向 站 品 1 装 串 || 六 
击 上 方 的 类 别 列表 ， 不 过 由 于 类 别 过 CT 
多 有 时 候 可 能 需要 滑动 一 下 类 别 列 表 pi 
才能 完成 操作 。 


车 手 永 “ 不 惑 ”一 一 访 海 











归 玩 车 达 人 张 玮 纶 
当 需 要 在 具有 相似 属性 类 别 之 间 进 行 较 频 繁 
的 切换 时 ， 这 种 设计 方式 很 值得 参考 。 图 4-130 滑动 式 导 航 
ED 
> 下 面 介 绍 除 了 主要 导航 外 的 其 他 导航 ， 包 括 次 要 导航 和 个 性 
wo 园 i 导航 4 


A 








toshop 创 芒 : @ 元 素 设 计 从 入 门 到 精通 
更 赞 3Ul 一 


\C IE 次 要 导航 模式 


所 有 主要 导航 模式 都 可 以 用 作 次 级 导航 ， 但 次 级 导航 不 太 适 合用 作 主 要 导航 。 

《四 下 拉 导 航 

还 有 一 种 类 似 抽 居 导航 的 导航 模式 同样 可 以 节省 页 面 空间 ， 并 且 隐 藏 次 要 入 口 ， 这 就 
是 下 拉 导 航 。 

下 拉 导 航 与 抽 屠 导航 的 作用 相同 ， 都 是 为 了 突出 内 容 。 一 般 位 于 界面 项 部， 通过 点 击 
打开 导航 菜单 。 导 航 菜单 以 浮 窗 形 式 位 于 界面 上 层 ， 可 通过 点 击 导航 菜单 以 外 的 区 域 使 其 
收 起 。 下 拉 导 航 的 菜单 与 界面 的 连贯 性 比 抽 民 导航 要 好 ， 容 易 让 用 户 感知 当前 位 置 。 但 由 
于 是 位 于 屏幕 上 方 ， 相 对 隐 巩 而 且 不 能 结合 手势 操作 ， 所 以 该 菜单 形式 也 不 适合 于 频繁 切 
换 功 能 使 用 。 考 虑 到 导航 菜单 的 可 用 面积 较 小 ， 一 般 采 用 列表 的 形式 展示 菜单 内 容 ， 如 图 
A Ns 

这 种 导航 模式 在 各 种 O20O 形态 的 APP 中 应 用 较 多 ， 例 如 美 团 网 ， 如 图 4-132 所 示 。 















美和 久 QQ 


下 拉 式 号 航 、 下 拉 式 号 航 sw 下 拉 式 导航 、 和 


二 加 二 级 EE 京北 : 王府 商场 

家 Sy 美 团 商 家 
Ns 新 世界 百货 ( 彩 旋 店 ) 
baw 
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半 团 向 家 pe 





























图 4-131 下 拉 导 航 图 4-132 “ 美 团 ”APP 界面 


四 轮 盘 式 导航 og 10 PM 二 

轮 盘 去 导航 也 叫 平 铺陈 导 
航 ， 比 较 适 用 于 足够 局 平 化 的 内 
容 和 随 ; gt 如 果 
应 用 得 当 能 够 给 人 耳目 一 新 的 体 
验 。 ili E 金 最 大 程度 地 保 
证 应 用 的 页 面 简洁 性 ， 一 般 都 会 a 
结合 滑动 切换 的 手势 ， 操 作 起 来 DD Co 
也 非常 方便 ， 如 图 4-133 所 示 。 

下 面 列举 了 轮 盘 式 导 航 的 优 
apa 图 4-133 轮 盘 式 导 航 
















能 够 最 大 程度 地 你 证 应 用 的 页 面 简 洁 性 ， 单 页 面 内 容 整 体 性 强 。 
”线性 的 浏览 方式 有 顺畅 感 、 方 向 感 。 

人 操作 最 方便 ， 连 续 切 换 时 其 操作 连续 性 比较 强 ， 主 体 页 面 过 渡 平 滑 ， 会 产生 更 
加 流畅 的 体验 。 





@@ 不 适合 展示 过 多 页 面 。 
@” 只 能 按 顺 序 查 看 相 邻 页 面 ， 不 能 跳跃 性 地 查看 间隔 页 面 ， 使 
用 户 很 容易 迷失 位 置 ， 因 此 轮 播 式 导 航 都 会 添加 几 个 小 点 来 
指示 当前 位 置 ， 如 图 4-134 所 示 的 墨迹 天 气 中 切换 城市 的 操 
作 也 是 使 用 这 种 导航 。 
名 不 能 够 快速 地 定位 对 应 的 分 页 内 容 ， 某 些 应 用 可 以 点 击 上 方 
的 类 别 列表 或 者 下 方 的 小 圆 点 图 标 ， 但 也 会 产生 很 多 麻烦 ， 
例如 类 别 过 多 ， 有 时 候 可 能 需要 滑动 一 下 类 别 列表 才能 完成 
操作 ; 原点 或 提示 过 小 ， 不 易 点 击 。 
”由 于 各 页 面 内 容 结 构 相 似 ， 容 易 忽略 后 面 的 内 容 。 Ea 


| 航 

(43.20050 0 人 wrongnmnrrrrrmmrgmrmrmrr rrrrrrrgcrn rmrenrrmrm rar 
悬浮 导航 是 将 导航 页 面 分 层 ， 无 论 用 户 到 达 APP 的 哪个 页 面 ， 悬 浮 导航 永远 悬浮 在 

上 面 ， 用 户 依靠 悬浮 层 随 时 可 以 去 想 要 去 的 地 方 ， 同 时 ， 为 了 让 悬浮 图 标 不 遮挡 某 个 页 面 

的 操作 ， 通 常 悬 浮 的 icon 都 可 以 在 屏幕 边缘 自由 移动 。 
IOS 系统 就 运用 了 这 种 导航 模式 ， 如 图 4-135 所 示 。 悬 浮 导航 在 大 屏幕 时 代 发 挥 了 

作用 ， 当 单 手持 握手 机 ， 担 指 在 手机 中 部 浏览 ， 想 回 到 主屏 幕 ， 但 是 手指 却 难以 到 达 屏 幕 

底部 时 ， 悬 浮 方块 就 能 为 用 户 提供 快捷 操作 。 
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图 4-135 iOS 悬浮 导航 
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在 Android 的 界面 中 同样 提出 了 腑 浮 导 
航 的 设计 概念 ， 如 图 4-136 所 示 。 虽 然 这 种 
导航 设计 很 少 ， 但 随 着 大 屏幕 的 发 展 可 能 会 


饼 广 泛 应 用 。 
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图 4-136 Android 悬浮 导航 


下 面 介 绍 两 种 个 性 导航 。 


@ 点 聚 导 航 





提示 : 号 浮 导航 
会 这 挡 某 些 页 面 操 
作 ， 在 设计 的 时 候 应 该 考 


| READIMORE 








Ali Connors 


Brunch thi s weekend? 
站 be in oo0d do 


me, Scott Jennifer 
加 Summer BBQ 
Wist 1 【月 已 《 MN Durt MM | 


Sandra Adams 
Oui oui 
Do youU have any re nmendations? Have 


Trevor Hansen 
Birthday gift 
Have any ideas about what to get Heidi for 


Britta Holt 
Recipe to try 
We should eat thi 


rated squash, corn and 
David Park 
Giants game 
Any interest in seeing the Giants y next 





点 聚 导 航 在 功能 上 与 抽 屡 导航 类 似 ， 都 是 用 于 隐藏 次 级 功能 。 但 是 ， 


的 功能 更 加 少 ， 


需要 给 用 户 指明 

当 层级 框 染 比 较 复 杂 ， 几 个 并 列 的 模块 中 都 有 用 户 频繁 使 用 的 核心 内 容 ， 但 又 需要 简 
化 页 面 时 ， 会 考虑 使 用 点 聚 导 航 。 点 聚 导航 将 多 个 核心 功能 汇聚 到 主 界面 中 显示 ， 以 方便 
一 般 会 融入 一 pr ee 


其 功能 ， 显 示 效 果 佳 。 


用 户 使 用 ,如 图 4-137 所 示 。 由 于 点 聚 导航 占用 的 空间 小 ， 
让 导航 更 具 趣 味 性 ， 如 图 4-138 所 示 。 很 多 图 片 拍摄 及 编辑 类 APP 会 使 用 这 





@ 优点 : 灵活 、 有 趣 ， 
界面 更 加 开阔 ， 适 
用 于 展示 信息 内 容 





较 多 的 软件 并 且 功 
能 需求 频 度 较 低 。 


中 后: 隐藏 了 功能 ， 
且 隐 藏 的 功能 不 能 
太 多 ， 侣 则 野 示 后 
用 户 较 难 反应 。 








图 4-137 点 聚 导航 
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4-138 添加 动态 效果 
人 国 隐喻 导航 


这 种 导航 主要 用 于 游戏 , 一 般 游戏 导航 不 仅 要 求 可 用 , 还 要 和 整个 游戏 的 风格 等 匹配 。 
在 隐喻 导航 模式 下 ， 用 页 面 模 仿 应 用 的 隐喻 对 象 。 对 于 日 记 、 书 籍 等 APP， 在 对 其 进行 分 
类 的 应 用 中 也 会 用 到 。 这 种 导航 模式 设计 得 好 可 以 增强 用 户 的 体验 ， 如 图 4-139 所 示 。 


i 全 
Thoughts | 本 | ra 加 


MY Diary 


My Schaedule 


G 


Phato JGurrial 


Ta=Do list 


ANnersary 





4-139 隐喻 导航 





®@ APP UI 设计 师 员 得 


(CD APP 界面 中 的 文字 排版 设计 原则 


文字 是 主要 界面 的 基础 元 素 ， 优 秀 的 文字 排版 可 以 在 一 定 程度 上 提升 用 户 体 验 。 

《网 减少 反差 

在 桌面 端 我 们 可 能 会 下 
较 少 ， 同 等 的 字号 差异 在 小 屏幕 上 给 人 的 感受 会 被 放大 。 原 因 是 我 们 在 使 用 这 两 种 设备 时 
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的 观看 距离 不 同 ， 在 桌面 端 我 们 的 眼睛 离 屏 幕 较 远 ， 而 在 移动 端 相 反 ， 因 此 我 们 应 该 在 移 
a sa TY Ne a EA AO on a 





4-140 大 小 反差 不 同 


(四 不 要 改变 固有 字 间 中 

不 要 轻易 改变 字体 默认 的 字 间 距 ， 即 固有 字 间 距 ， 字 体 设计 师 已 经 充分 考虑 了 这 款 字 
体 所 适合 的 字 间 距 ， 如 果 不 满意 可 以 更 换 字 体 。 

人 国 使 用 字 重 

不 要 使 用 PS 中 的 文本 加 粗 效 果 ， 它 不 仅 破 坏 字 体 本 身 的 美感 ， 还 改变 了 文字 原 
本 的 宽度 而 影响 段落 内 文字 的 对 齐 。 合 理 的 方式 是 使 用 字体 本 身 的 字 重 来 控制 ， 例 如 
STHeiti、Helvetica Neue 等 字体 本 身 提供 Light、Regular、Medium 等 两 三 种 甚至 更 多 的 
字 重 选择 ， 如 图 4-141 所 示 。 


二 己 spe Helvetica Neue 
中 X Helvetica Neue 


Hx Helvetica Neue 
中 


Xx Helvetica Neue 


图 4-141 不 同 自重 效果 


@ 颜色 反差 

移动 设备 使 用 环境 复杂 多 变 且 不 局 限 在 室内 ， 可 能 在 室外 ,甚至 暴露 在 强烈 的 阳光 下 ， 
应 确保 文字 在 背景 中 不 会 识别 困难 ， 即 使 是 色弱 者 也 可 以 正常 阅读 。WCAG 2.0 中 建议 的 
两 者 颜色 反差 比 应 该 高 于 4.5:1 ( AA 级 ) ， 这 样 才能 确保 更 多 人 及 环境 都 可 以 轻松 阅读 。 

(3 栅 格 系统 

在 小 屏幕 上 ， 一 些 桌面 病 无 关 大 雅 的 间距 不 等 问题 会 变 得 突出 。 

如 图 4-142 所 示 ， 可 以 看 到 段落 右 侧 与 卡片 的 间距 明显 大 于 堪 侧 。 造 成 这 个 问题 的 








原因 是 设计 时 对 文本 框 的 宽度 与 文字 大 小 在 关系 上 考虑 不 周全 ， 导 致 文 字 不 能 完美 地 填充 
满 文本 框 。 











gm | 00e0 中 国联 通 倒 19:14 CNA 
(3 行 袍 
人 
条 0 人 a A 推荐 ”摄影 绘画。 好 物 = v 
理想 长 度 ， 因 为 很 难 让 每 一 行 都 精确 吻合 。 Be 
众所周知 ， 舒 适 阅 读 的 理想 行 宽 是 65 个 字符 左右 。 星际 穿越 天 空 之 境 ， 梦 的 别称 叫做 玻 利 维 
四 要 | 1 出 人 NN 亚 。 点 开 这 两 张 图 ， 回 想 那 些 做 过 的 梦 。 
fi 生 的 so 长 度 取决 于 字体 的 all 子 | 日] EE 和 用 | 使 当日 落 的 光线 恰巧 打 亮 盐 湖 结晶 的 边缘 ， 
J 这 是 我 这 辈子 没 在 现实 中 也 没 在 图 片上 看 
用 的 具体 文字 。 过 的 景色 ， 感 谢 荷兰 的 好 基 友 做 了 我 一 小 
时 模特 。 到 了 晚上 气温 下 降 至 零下 15， 南 
;站 半 | 败 马 从 字 短 很 难 i 日 史 半球 的 银河 全 景 揭 开 了 面纱 ， 白 色 的 盐湖 
在 栗 面 站 浏览 器 中 ，65 个 字符 很 难 触及 边缘 ， 但 在 移 es 
动 设备 上 ，65 个 字符 会 超出 浏览 器 的 边界 ， 所 以 在 移动 设 机 们 是 一 以 他 列 、 有 兰 、 贡 胃 、 罗 中 
iy 大 家 从 乌 尤 尼 盐湖 天 空 之 境 3500 米 一 路 沿 
Ea 必须 缩 减 行 宽 O 着 智利 、 阿根廷、 玻利维亚 的 安第斯 山 及 
PO (ll A L \ 到 海拔 5000。 一 起 推 车 、 一 起 换 轮 胎 、 一 
在 移动 站 并 没有 普遍 认可 的 行 宽 标准 ， 不 过 传统 上 ， 起 住 在 盐 砌 的 房子 ， 睡 零下 十 度 无 暖气 大 


通 铺 ， 一 起 玩 以 色 列 的 纸牌 游戏 yaniv， 一 


4-142 间距 问题 





报纸 或 杂志 上 的 每 一 个 窗 列 都 会 趋向 于 39 个 字符 。 鉴 于 这 
个 理想 ， 行 宽 已 经 经 历 了 数 个 世纪 的 考验 ， 它 在 移动 端 字 
体 上 也 运转 良好 。 

(6 识 松 行距 、 紧 闫 行距 

行距 是 行 之 间 的 空间 ,行距 太 紧 凑 ， 会 让 观 者 的 视线 难以 从 行 尾 扫 视 到 下 一 行 首 ; 行 
距 太 宽松 , 字 间 距 会 开始 形成 队列 , 阻 断 了 行 的 视觉 流 。 图 4-143 所 示 为 理想 行距 、 太 紧凑 、 
太 宽 松 三 种 效果 。 





图 4-143 不 同行 距 

全 找到 最 佳 状态 

所 有 字体 至 少 有 一 种 最 佳 状态 ， 在 屏幕 上 展现 最 佳 的 尺寸 ， 还 有 在 浏览 器 中 最 能 保持 
字形 的 抗 锯齿 选项 。 

在 最 佳 状态 下 ， 多 数 笔画 通常 都 能 排列 在 像素 网 格 中 一 一 像素 字体 ， 这 些 字 体 仅仅 在 
将 字号 调整 到 最 佳 状态 时 有 有效， 将 字体 设 为 最 佳 状态 能 形成 更 强烈 的 对 比 。 当 为 移动 冲 设 
EN Hb i st a ee 

通常 设计 师 通 过 基线 网 格 来 排列 文字 , 但 在 移动 设备 上 我 们 需要 使 用 x 高 度 来 代替 ( x 
高 度 指 小 写字 母 x 的 高 度 ) 。 从 易 读 性 研究 中 我 们 知道 大 脑 识 别 的 是 文字 顶部 ， 而 不 是 弃 
部 ， 所 以 要 形成 更 加 平顺 的 视 锅 流 ， 我 们 要 确保 字符 顶部 最 契合 像素 网 格 。 
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侠 不 要 忽视 起 伏 边 
起 伏 边 是 一 段 文字 的 边缘 ， 因 此 每 一 行 从 同一 个 地 方 开始 , 文字 左 侧 边缘 应 该 是 平 的 ， 
这 是 常见 的 左 对 齐 。 


两 六 对 齐 的 文字 产生 的 留 白 不 统一 ， 最 糟 的 情况 会 导致 一 行 中 只 有 几 个 字 ， 相 当 不 协 
调 。 更 窄 的 行 宽 会 加 重 两 端 对 齐 的 问题 ， 所 以 两 端 对 齐 的 文字 在 移动 站 是 难以 | 阅读 的 。 
4-144 所 示 从 左 至 右 分 别 为 左 对 齐 、 居 中 对 其 、 两 端 对 齐 。 





图 4-144 不 同 对 齐 方式 


(了 U 旭 将 ios 的 UI 设计 转换 成 安 卓 平 合 的 技巧 


不 同 的 平台 有 不 同 的 UI 设计 规范 ，iOS 和 Andriod 自然 也 是 不 一 样 的 。 下 面 我 们 分 
享 几 个 将 UI 设计 在 i0S 和 Andriod 这 两 个 平台 中 转换 的 技巧 。 
人 国 技 巧 一 : 熟悉 术语 
首先 我 们 需要 熟悉 业界 的 常见 术语 ， 如 “dp” “sp” 和 “9 patch” 等 。dp 和 sp 是 
尺寸 单位 ， 而 9 patch 是 组 件 格式 的 名 称 。dp 是 density-independent pixels 的 简写 ， 它 
是 一 个 永远 不 会 改变 大 小 的 绝对 单位 。sp 和 dp 很 像 ， 但 它 是 可 以 伸缩 的 。 如 果 用 户 在 设 
备 的 设置 里 调 大 文字 ， 那 么 通过 sp 定义 的 字体 大 小 就 会 受到 影响 。9 patch 是 一 个 能 让 组 
件 可 大 可 小 的 格式 ， 对 于 大 幅 减 小 文件 的 体积 大 有 帮助 。 

人 国 技巧 二 : 理解 屏幕 密度 和 尺寸 

虽然 Andriod 系统 有 很 多 生产 商 在 研发 , 但 是 Ul 设计 不 必 为 所 有 的 手机 设备 进行 设计 ， 
Andriod 有 一 个 屏幕 密度 的 系统 能 适应 每 个 屏幕 尺寸 ， 因 此 只 需要 留意 那 5 到 7 个 不 同 的 
尺寸 就 可 以 了 。 

对 于 1080 x 1920 pixels ( xxhdpi ) 来 说 ， 所 有 像素 值 际 以 3 便 是 dp。dp 是 针对 所 
有 显示 屏 的 一 个 绝对 数值 单位 。 如 果 要 实现 正确 的 像素 值 ， 必 须 在 每 个 分 辨 率 上 做 乘 、 除 
法 。 例 如 对 于 1080 x 1920 px ( xxhdpi ) 来 说 ， 所 有 像素 值 除 以 3 便 是 dp。 

在 任何 情况 下 ， 设 计 师 都 应 该 为 优化 APP 于 不 同 的 屏幕 尺寸 和 分 辩 率 做 出 努力 。 在 
APP 上 线 之 前 ， 在 至 少 5 个 不 同 分 辨 率 的 设备 上 进行 测试 。 即 使 分 辨 率 不 同 ， 比 例 还 是 非 
常 接近 甚至 一 致 的 ， 因 此 大 家 不 必 太 担心 原始 排版 会 被 打 乱 或 需要 重新 设计 的 问题 。 
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图 技巧 三 : 不 要 转换 

设计 师 不 应 该 在 安 卓 上 使 用 同一 套 规 格 的 Ul。iOS 中 有 一 个 能 一 键 返回 桌面 的 “物理 
Home 键 ”， 然 而 安 卓 上 的 按键 是 “返回 、Home 和 多 任务 ”。 这 意味 着 一 位 Andriod 用 
户 可 以 从 一 个 应 用 轻松 跳 转 到 男 一 个 应 用 。 这 是 一 个 很 大 的 不 同 点 ， 因 此 iOS 通常 会 有 一 
个 结合 了 纵向 和 横向 的 Ul 结构， 但 Andriod 更 偏向 于 纵向 。 男 外 ， 这些 返回 、Home 和 多 
任务 按键 都 在 屏幕 底部 ， 因 此 要 考虑 是 否 将 标签 放 在 底部 的 位 置 。 

二 技巧 四 : Material Design 

谷歌 发 布 了 它 的 Material Design， 这 是 一 个 全 新 的 设计 语言 。 这 确实 是 一 个 绝 佳 的 
设计 方向 ， 大 家 可 以 去 网 站 上 看 看 ， 理 解 基 本 的 UI 原理 。 当 然 ， pk yn 
颜色 或 者 阴影 这 些 特定 的 视 客 设计 ，UI| 设计 师 可 以 有 更 多 自己 的 创意 。 

8M 技巧 五 : 图 标 

Andriod 上 图 标的 风格 更 加 实心 和 圆润 ，Andriod 的 可 伸缩 图 标 能 目 动 在 不 同 尺寸 之 
则 切换， 然而 这 种 切换 可 能 会 导致 位 图 变 模糊 。 为 了 确保 位 图 不 受 影响 ， 设 计 师 应 该 在 适 
配 每 个 尺寸 上 花 点 时 间 。 

( 漳 技巧 六 : 其 他 方面 

在 软 键 方面 上 ， 典 型 的 Andriod 设备 在 屏幕 上 有 特定 的 Home、 返 回 和 荣 单 按键 。 但 
三 星 是 以 实体 按键 的 形式 应 用 在 硬件 设备 上 ， 所 以 要 确保 排版 能 在 三 星 和 其 他 设备 上 都 行 
得 通 。 

Andriod 上 的 插件 从 最 早 开 始 就 是 其 独一无二 的 特点 之 一 。 用 户 可 以 在 主屏 创建 简单 
上 且 实用 的 卡片 ， 虽 然 只 提供 局 限 的 功能 ， 可 以 多 看 看 别人 是 怎么 做 的 ， 然 后 在 开始 设计 之 
前 和 工程 师 谈 谈 实现 的 问题 。 

一 个 典型 的 消息 往往 由 图 标 + 文字 或 图 片 + 文字 组 成 ， 但 Andriod 的 4.x 和 5.x 使 用 
了 不 同 的 方式 ， 这 也 是 大 家 需要 注意 的 一 点 。 
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| 


门 - ] 大 部 分 应 用 程序 都 是 依靠 表单 实现 数据 输入 或 布局 ， 常 见 的 表 
~ 单 有 登录 表单 、 注 册 表 单 、 核 对 表单 、 计 算 表单 、 搜 索 表单 、 多 步 


加 No 全 习 一 一 ES- Sn 一 
又 表单 和 长 表单 ， 如 图 5-1 所 示 。 下 面 对 几 个 比较 常见 的 表单 进行 
介绍 。 
四 国 二 
Sq In Regeter Checkovt 
we 
Sq In 
roc+ . La ja 
Regster RE 
Payment method 
Piace Order Coxviate 
登录 表单 注册 表单 核对 表单 计算 表单 
”4 
> 
他 
Show 100 Re Sobmt Sbm+ 
面 
搜索 表单 多 步骤 表单 长 表单 元 
图 5-1 表单 类 别 
lx 


( 语 司 登录 去 单 


登录 表单 包括 少量 的 信息 输入 , 例如 用 户 名 、 密 码 、 操 作 按 钮 、 密 码 帮 助 、 注 册 选 项 等 ， 
很 多 应 用 还 会 添加 用 户头 像 。 下 面 介 绍 登 录 表 单 的 设计 制作 ， 图 5-2 所 示 为 制作 流程 图 。 











() | 按 Ctrlt0 组 合 键 
打开 一 张 素材 图 

请， 如 图 5-3 所 示 。 
(2 设置 前 景色 为 日 
色 ， 使 用 “矩形 工 


具 ” 绘 制 矩形 , 如 图 5-4 所 示 。 图 5-3 打开 素材 图 5-4 绘制 矩形 
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(})3 为 图 层 添加 “渐变 赤 加 ”和 “投影 ”样式 ， 如 图 5-5 所 示 。 

















一 渐变 到 加 - - 投影 
一 渐变 一 的 
混合 模式 (6): 正片 又 底 ~ 国 国 
二 合 杭 也 局): 正常 于 中 | 访 色 不 透明 度 (D)， = 25 o% 
:= 5 AT 
ee 下 5 县 角度 Wy: ( | 】 50。 度 口 使 用 全 局 光 人 
[| 门 | 反 向 f) 距离 D): 人 一 1 像素 
样式 (0D): 线性 = 加 与 图 层 对 齐 癌 扩展 (R): < 0 % 
二、 大 小 G): 后 3 ”像素 
角度 :| 上 1 90 度 ep” 
纹 注 (9): 一 一 一 一 100 史 等 高 线 : - 口 消除 锯 频 (0) 
- 一 杂 色 (N): < 
设置 为 点 认 值 | | 在 位 为 点 认 值 区 
团 图 层 挖 空 投影 (U) 
设置 为 默认 值 | | 复位 为 默认 什 














图 5-5 添加 图 层 样 式 


() 再 次 使 用 “和 矩形 工具 ”绘制 矩形 ， () 站 使 用 “ 横 排 文字 工具 ”输入 文字 ， 
如 图 5-6 所 示 。 


并 修改 “立即 注册 ”的 颜色 为 蓝 
色 ， 如 图 5-7 所 示 。 





图 5-6 绘制 矩形 图 5-7 输入 文字 
() Ob 使 用 “和 矩形 工具 ”绘制 沧 形 ， 如 () 复制 图 屋 ， 将 矩形 缩小 2 px， 如 
图 5-8 所 示 。 图 5-9 所 示 。 





图 5-8 绘制 矩形 图 5-9 复制 并 缩小 








UN 打开 条 梓 图 万 于 计 把 NB 妈 信 I 0) 为 图 层 添 加 村 版 ， 然 后 单 击 守 
如 图 5-10 所 示 。 


版 ， 填 充 黑 色 。 按 住 Ctrl 键 单 
击 下 层 窍 形 的 缩 宽 儿 ， 载 入 选区 ， 然 后 执 
行 “选择 ”|“ 变 换 选 区 ”命令 ， 将 其 缩 
小 到 102 px， 如 图 5-11 所 示 。 





图 5-10 打开 素材 图 5-11 缩小 选区 


] (0) 填充 白色 , 效果 如 图 5-12 所 示 。 | l a oh a 
如 图 5-13 所 示 。 


6) < 
UD 








平 沙洲 相国 酒 记 六 





图 5-12 效果 图 5-13 绘制 矩形 


] 为 图 层 添 加 “ 描 边 ”样式 ， 如 |] 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 
图 5-14 所 示 。 添加 后 的 效果 如 图 5-15 所 示 。 





描 边 

结构 
大 小 G): 人 1 像素 
位 置 (P): 内 部 了 

混合 模式 人 ): 正常 

不 透明 度 (O): 100  % 





填充 类 型 (F): 渐变 ~ 


| D&A 
样式 ;线性 ~ 团 与 图 展 对 齐 (6) 
角度 A): (| ) 50 ” 度 回 伪 色 


缩放 (0): = 





100 % 
设置 为 默认 值 ] [ 复位 为 默认 值 
图 5-14 添加 “ 描 边 ” 样 式 图 5-15 添加 后 的 效果 
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14 使 用 绘图 工具 绘制 图 形 ， 如 15 人 
图 5-16 所 示 。 


所 示 。 








图 5-16 绘制 图 形 图 5-17 继续 绘制 图 形 


| O 复制 定形 框图 层 ， 为 图 层 添 加 “ 描 边 ”和 “外 有 发光” 样式 ， 如 图 5-18 所 示 。 然 
后 绘制 图 形 ， 效 果 如 图 5-19 所 示 。 





























指 边 外 发 光 
Sy 1 本 本 混合 模式 (E): 正常 ~ 
一 一 不 透明 度 (O): 4 和 0 %% 
位 置 (FP): 内 部 ~ 杂 色 (N): 信 0  % 
混合 模式 (8) 正常 ~ @ 国 * 
不 透明 度 (0): 一 py 100  % 
填充 类 型 F)， 颜色 ~ 本 
扩展 (p): 4 0 % 
疡 色 :让 笑 大 小 (5): 后 3 像素 
品质 
二 :| -| 器 湖 祭 据 具 O 
范围 R): zs 50 % 
, 拉动 0): 4 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
上 设置 为 默认 值 _| | 复位 为 默认 值 | 




















图 5-18 添加 图 层 样 式 图 5-19 绘制 图 形 


| { 使 用 “ 横 排 文字 工具 ”输入 文 ] 在 下 方 绘 制 贺 角 和 矩形 并 添加 图 
字 ， 如 图 5-20 所 示 。 层 样 式 ， 然 后 输入 文字 ， 如 图 


DZ 所 示 。 





图 5-20 输入 文字 图 5-21 绘制 图 形 并 输入 文字 











] OQ 使 用 “ 圆 角 矩形 工具 ”绘制 圆 角 和 窍 形 ， 如 图 5-22 所 示 。 





册 () 为 图 层 添 加 “ 描 边 ”“ 内 阴影 ”和 “渐变 登 加 ”样式 ， 如 图 5-23 所 示 。 


5-22 绘制 圆 角 和 矩形 








指 边 
结构 
大 小 6): 人 1 像素 
位 置 p)， 内 部 ~ 
混合 模式 6)， 正常 > 
不 透明 度 (0): se 10  % 
填充 类 型 F)， 渐变 ~ 
EE Mal 
角度 Qj: (| ) 0 ” 度 辣 仿 色 


缩放 (C):， = 10 % 





| 设置 为 默认 值 “| | 复位 为 默认 值 | 








样式 (D): 线性 Y” 轩 与 图 层 对 齐 (G6) 





内 阴影 


结构 


混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): 一 75  % 


品质 


角度 (9: (| ) 区 度 回合 用 全 局 光 (G 
86 离 D): 入 志 


阻塞 CC 0 % 

大 小 BS}: C= 一 一 0。 外 素 
$8 | "| in 

杂 色 NG 0 % 





|_ 设置 为 默认 值 。| | 复位 为 默认 值 | 

















Wl 











图 5-24 图 像 效 果 





图 5-23 添加 图 层 样 式 


执行 确定 操作 后 的 图 像 如 图 
5-24 所 示 。 


ly 


渐变 晋 加 
潮 变 
混合 模式 (D): 
不 透明 度 (P): 





正常 v 癌 访 色 
100 % 


7 ee NNT 一 人 
衬 殉 澳 汕 团 油 言 尊 了 是 3 下 


源 六 [| 站 反 向 () 


样式 人 ): 
角度 (N): 
缩放 (5): 


线性 ”是 与 图 层 对 齐 们 





© 100 % 





[| 设置 为 默认 值 。| | 复位 为 默认 值 | 








使 用 “ 模 排 文字 工具 ”输入 文 
字 ， 如 图 5-25 所 示 。 











图 5-25 输入 文字 
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几 为 文字 添加 “投影 ”图 层 样 式 ， ) 单 击 “确定 ”按钮 完成 登录 表 
单 的 制作 ， 如 图 5-27 所 示 。 


如 图 5-26 所 示 。 


慈 合 模 陈 介 )， 正常 ™ | | 


不 透明 度 (O): 二 25  % 











角度 (A): (人 No 度 [| 使 用 全 局 污 (6) 











扩展 QR): A 一 m= 0 % 
大 小 (9): (二 ”1 像 直 
图 5-26 添加 “投影 ”图 层 样式 图 5-27 完成 制作 


(JI 蕊 注册 去 单 


注册 表单 应 该 简洁 明了 ， 最 好 在 一 屏 内 完成 所 有 要 填 的 信息 ， 注 册 与 登录 按钮 也 应 该 
显示 在 同一 屏幕 中 。 下 面 介 绍 注册 表单 的 设计 制作 ， 图 | DS 所 示 为 制作 流程 图 。 





图 5-28 制作 流程 图 


使 用 “和 窍 形 工 具 ” 绘 制 窍 形 ， (})2 修改 填充 烦 色 为 灰色 ， 在 撒 部 





如 图 5-29 所 示 。 绘制 息 形 条 ,如 图 5-30 所 示 。 


图 5-29 绘制 矩形 图 5-30 绘制 矩形 条 















0U 3 使 用 “ 圆 角 和 窍 形 工具 ”绘制 圆 () 继续 绘制 贺 角 和 窍 形 并 输入 文字 ， 
角 和 矩形 ， 使 用 “ 横 排 文字 工具 ” 如 图 5-32 所 示 。 
输 信 文字 ， 如 图 531 所 示 。 





5-31 绘制 圆 角 和 矩形 并 输入 文字 





() 站 修改 填充 颜色 为 橙色 ,绘制 圆 角 矩形 ， 
然后 输入 文字 完成 制作 ， 如 图 5-33 
所 示 。 





图 5-33 完成 制作 


\ IE 搜索 表单 


搜索 表单 只 需要 设计 必要 的 输入 项 ， 并 提供 合理 的 默认 值 妈 可。 搜索 表单 包括 ， 如 图 
5-34 所 示 的 几 种 。 











Trtphew - 








显 性 搜索 自动 补 全 搜索 动态 搜索 











保存 最 近 搜 索 搜索 表单 











图 5-34 搜索 表单 的 种 类 
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表单 设计 不 能 设置 过 多 的 搜索 选项 ， 以 免 造成 用 户 选 择 困 难 。 本 节 将 介绍 搜索 表单 的 
设计 制作 ， 图 5-35 所 示 为 制作 流程 图 。 
































图 5-35 制作 流程 图 


() | 打开 素材 图 片 ， 使 用 “ 圆 角 矩形 工具 ”绘制 加 角 和 矩形 ， 如 图 5-36 所 示 。 














图 5-36 绘制 圆 角 算 形 


(})2 为 图 层 添 加 “和 斜面 和 浮 驹 ”“ 描 边 ” 和 “内 阴影 ”图 层 样式 ， 如 图 5-37 所 示 。 



















































































利和 描 边 内 阴影 
轴 样式 (D: 内 儿 3 = We 
式 (D): 内 斜面 咱 (S)， Ar 
A 福 NE i 混合 模式 (8)， 正常 IE 
深度 (D): ZY 1000 % 位 置 (FP): 内 部 不 透明 度 (O): Py 100  % 
a:@E OF 混合 模式 (6): 正常 M4 个 
大 小 gj; 6 0 “像素 - 角度 (A): | | 1 s0 ， 度 回 使 用 全 局 光 (G) 
软化 (P): 4 0 像素 不 透明 度 (O): 2 100 % “4 
1。 | 距离 (D0): 人 2 像素 
Es es 填充 类 型 F): 颜色 ~ 亲 间 tj: Cr | 
Ee ，/ 加 合用 全 局 (6) 颜色 : 大 小 G): (= 一 0 像素 
局 硫 : 0 台 
光泽 竺 高 续 | 从 回 消 痛 据 具 () 一 品质 
高 光 模式 (H): 正常 ~ 国 国 a 风 
ee ED 等 高 线 [4 消 隐 锯 上 () 
阴影 模式 (a) 正片 又 底 ~ 杂 色 (N): (= 一 0 % 
不 透明 度 (CO): 100 % 
设置 为 默认 值 复位 为 默认 值 - TT 
TE - 设置 为 默认 值 ] [ 复位 为 默认 值 














图 5-37 添加 图 层 样式 





() 单 击 “ 确 定 ” 按 钮 
后 的 图 像 效 果 如 图 

5-38 所 示 。 
()4 使 用 “ 横 排 文字 工 
县 ”输入 文字 ， 并 


绘制 图 形 ， 如 图 5-39 所 示 。 














图 5-38 图 像 效 果 图 5-39 输入 文字 并 绘制 图 形 











使 用 “ 圆 角 珑 形 工具 ”绘制 圆 角 窍 形 ， 如 图 5-40 所 示 。 然后 修改 混合 模式 为 “下 
J 


a ya el ee 和 “投影 





描 边 
结构 
大 小 人): Ce 像素 
位 置 (P):; 内 部 ~ 
i 混合 模式 (6): 正常 
不 透明 度 (0O): D 100 % 





填充 类 型 FF): 颜色 ~ 
颜色 : 











上 设置 为 默认 值 _」 | 复位 为 默认 值 | 








1 样式 如 图 54 贡 所 示 ， 























投影 
混合 模式 (6): 正常 -| 
不 透明 度 (0): Ze 60 % 
和 角度): | | 】 55 度 问 使 用 全 局 光 (G) 
距离 D): /一 一 2 ”像素 
扩展 (R): 4 0 %% 
大 小 (S): CS 0 像素 

















5-40 绘制 圆 角 算 形 


0 


执行 确定 操作 后 的 图 像 效 来 如 图 5-42 所 示 。 
层 添 加 “内 阴影 ” 


图 5-41 添加 图 层 样式 


在 矩形 内 绘制 一 个 小 沧 形 ， 并 为 图 


和 “渐变 县 加 ”样式 ， 如 图 5-43 所 示 。 





























0 





图 5-42 图 像 效 果 
单 击 “ 确 定 ” 按 钮 后 的 图 像 效 果 
如 图 5-44 所 示 。 


Un 


内 阴影 渐变 到 加 
结构 渐变 
混合 模式 (0) 正常 ~ 回访 色 
混合 模式 (6): 正常 ”| | 不 透明 度 (P): 为 100 % 
不 透明 度 (O): Z 100 % 渐变 : | [=] 癌 反 向 ®) 
oo 样式 (D): 线性 ~ 加 与 图 层 对 齐 () 
角度 (A): \ + J -90 ” 度 回 使 用 全 局 光 (G) 角度 MW: (|【 )50 一度 
中 高 D: 一 一 1 像素 人 
阻塞 (0): CT 0 % | 设置 为 默认 值 | | 复位 为 默认 值 | 
大 小 人) 3 0 保志 























图 5-43 添加 图 层 样式 


使 用 “ 横 排 文字 工具 ”输入 文字 
并 绘制 箭头 ， 如 图 5-45 所 示 。 
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置 ， 如 图 5-46 所 示 。 


图 5-44 图 像 效果 


将 三 个 图 层 整理 在 一 个 组 中 ， 然 
后 复制 组 ， 并 修改 文字 、 调 整 位 


1 0 


所 示 。 








Bob Sartarius 











图 5-46 复制 并 修改 


图 5-45 输入 文字 并 绘制 箭头 


再 次 绘制 一 个 矩形 ， 为 图 层 添加 
“渐变 于 加 ”样式 ， 如 图 5-47 





渐变 亚 加 
渐变 
混合 模式 (D): 正常 v 由 | 仿 色 
不 透明 度 P 站 一 | | % 
淅 六: [ER | © 反 向 (R) 
样式 (): 线性 v ”|v 与 图 层 对 齐 (0) 
角度 0:( | ) 50 度 


缩放 人 ): 二 79 一 > 100 % 

















| 设置 为 默认 值 。| | 复位 为 默认 值 | 














图 5-47 添加 “ 淘 变 又 加 ”图 层 样式 


由 局 


/ Ps NA 一 人 请 
半 珊 凋 汕 加 六 村 特写 





Photoshop 创意 @ pp 元 素 设计 从 入 门 到 精通 





| 单 击 “确定 ”按钮 后 的 效果 如 | 此 输入 文字 并 复制 第 涉 、 修 改 闫 
图 5-48 所 示 。 色 ， 如 图 5-49 所 示 。 











Bob Sartariu 




















图 5-48 图 像 效 果 图 5-49 输入 文字 并 复制 箭头 


] 3 使 用 绘图 工具 绘制 三 角形 ， 完 成 搜索 表单 的 制作 ， 如 图 5-50 所 示 。 








图 5-50 完成 制作 





下 面 介绍 聊天 对 话 框 和 操作 提示 对 话 框 的 设计 。 


ay 
CD CW 


CC 葬 和 聊天 对 话 征 
聊天 对 话 框 在 具有 交流 功能 的 APP 中 是 必 不 可 少 的 ， 下 面 介绍 聊天 对 话 杠 的 设计 ， 
5-51 所 示 为 制作 流程 图 。 





新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


全 S 
| 


图 5-51 制作 流程 图 











0 | 新 建 空 白文 要 ， 拖 入 背景 图 ， ()2 使 用 “椭圆 工具 ”“ 圆 角 和 矩形 
如 图 5-52 所 示 。 se 
形 ， 如 图 5-53 所 示 。 






图 5-52 拖 入 背景 图 图 5-53 绘制 图 形 
0 bt 选择 圆 ， 在 选项 栏 中 设置 “ 减 执行 操作 后 的 图 形 效 果 如 图 
去 顶层 形状 ”, 如 图 5-54 所 示 。 5-55 所 示 。 





和 
0) 
UD 





屁 + 车 器 对 计 这 
中 国 新 建 图 层 
和 


网 | 合并 形状 组 件 


平 泪 沛 相国 酒 记 六 














图 5-54 减 去 顶层 形状 图 5-55 操作 后 的 效果 
QD 设置 该 图 层 的 填充 为 0%， 并 添加 “内 发 光 ” 和 “颜色 又 加 ”图 层 样 式 ， 如 图 
5-56 所 示 。 
ee 颜色 到 加 
混合 模式 (8) 源 色 毅 色 一 
不 透明 度 (0): = 75 % 
杂 色 NM: 一 0 % 赣 语 模式 已 ): 正常 = 
OO 不 透明 度 (0): 一 ?9 一 80  % 


图 素 | 
方法 (Q@): 杀 和 ~ - EE 
| 公交 为 默认 值 县 位 为 加 从 值 
源 : 回 居中 全 回 边缘 (G) 
阻塞 (QO: 一 一 一 一 = 100 % 


大 小 8): 人 一 一 一 一 1 像素 


等 高 绪 ; | -| 忆 消除 锯 频 (L) 


范围 R): 一 ?= 50 % 
抖动 O): G il % 


设置 为 默认 值 复位 为 默认 值 


品质 

















图 5-56 添加 图 层 样 式 


is 
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0 


高 光 模 式 (H): 
不 透明 度 (O): 
阴影 模式 (A): 
不 透明 度 (C): 


Photoshop 创意 





单 击 “ 确 定 ” 按 钮 后 的 图 像 
如 图 5-57 所 示 。 





， 因 pp 元 未 没 计 从 入 门 到 精通 


图 5-57 图 像 效 果 


为 图 层 添加 “斜面 和 浮雕 ”“ 描 边 ”“ 内 阴影 ” 


和 “投影 ” 











斜面 和 浮雕 
结构 
样式 (D): 内 介面 
方法 (Q): 平滑 M 
深度 (D0): 5 100 % 
方向 : @@ 上 OF 下 
大 小 (2): <“ 苔 16 像素 
软化 (F): 65 0 像素 
阴影 
角度 (N): 5 120 度 
* | | 团 使 用 全 局 光 (G) 
高 度 “~ 30 | 度 


光泽 等 高 线 : | "| 加 消除 强占 ( 





到 加 ~ 
35 9 
到 加 ~ 国 国 
25 9596 








| 设置 为 默认 值 | | 复位 为 默认 值 | 














描 边 
结构 
大 小 (5): G 
位 置 p): 外 部 ~ 
混合 模式 (6): 正常 
不 透明 度 (O): 
填充 类 型 F): 颜色 ~ 


所 : 国 呈 | 





使 用 “椭圆 工具 ”绘制 正 圆 ， 


如 图 5-58 所 示 。 


图 5-58 绘制 正 圆 


样式 ， 如 图 5-59 所 示 。 


66 内 发 光 2 66 J 2 66 外 发 光 22 





内 阴影 





结构 
1 像素 混合 模式 (6) 亚 加 ~ 
不 透明 度 (o): 4 一 一 1 % 
~ 角度 (A): | 本 | 120 度 回 使 用 全 局 光 (G) 
100 9 
距离 D): 人 1 ”像素 
阳 塞 人): ( 二 > 0 % 


大 小 (5): G 加 像素 
品质 


等 高 线 : L "| 口 消 委 锯 占 届 ) 


杂 色 (N): G 





% 








| 设置 为 默认 值 _| | 复位 为 默认 值 | 


| 设置 为 默认 值 _| | 复位 为 默认 值 | 
































结构 
混合 模式 (6): 到 加 ~ 
不 透明 度 (D): 85  % 
杂 色 (N): G 0 % 
® [| 
图 素 
方法 (Q): 柔和 ~ 
源 : 占 居中 人 日 回 边缘 G) 
阻塞 (C): G 0 % 
大 小 (35): G 1 像素 
品质 
等 高 线 :| -| 口 消 多 上 
范围 R): % 
拌 动 0): G 0 % 
| 设置 为 默认 值 | 揽 位 为 默认 值 | 
































光泽 
结构 
混合 模式 (6): 亚 加 ~ 国 国 
不 透明 度 (D): Z5 33  % 
角度 0:( 上 | 50 ” 度 
距离 0): 55 11 ”像素 
大 小 (5): 14 像素 
回 消除 旨 具 人 
[= 
sa 外 = 同 反 相 人 加 
| 设置 为 默认 值 | | -复位 为 默认 值 | 
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文档 中 创建 前 贴 绽 版 ， 如 图 
5-60 所 示 。 


10 ， 


所 示 。 


200 





按 Ctrl+0 组 合 键 
打开 图 片 ， 并 拖 入 


绘制 半 透 明白 色 作 
为 高 光 ， 如 图 5-61 












































图 5-59 添加 图 层 样式 


图 5-60 拖 入 图 片 并 创建 剪贴 蒙 版 


结构 结构 
混合 模式 (8)， 正 党 - En 
: 本 
日 < 一 一 
杂 色 (NN): /一 0 ee 不 透明 度 (O): 75  % 
a 图 [| 角度 (A): | wp i 120 度 园 使 用 全 局 光 (G) 
图 素 中 高 Di: 一 一 1 像素 
方法 (Q): 柔和 > 扩展 (R): 4 0 % 
扩展 (P): 4 0 % 大 小 (5S): 本 5 像素 
大 小 (5): 5 5 像素 品质 
Sm 等 高 线 : } - 口 消 妆 饥 占 
等 高 线 : | - 回 清 闪 据点 人 A 
范围 人 R): % 
拉动 0): 二 0 % 财 图 层 控 空投 影 (U) 
[设置 为 默认 值 “| | 复位 为 默认 值 | 
[设置 为 默认 值 | [ 复位 为 默认 值 | 








图 5-61 绘制 高 光 


使 用 “椭圆 工具 ”绘制 正 圆 ， 
如 图 5-62 所 示 。 


] ] 


WA 





使 用 “和 矩形 工具 ”绘制 图 形 ， 
如 图 5-63 所 示 。 





图 5-62 绘制 正 圆 
使 用 “ 横 排 文字 工具 ”输入 文 
字 ， 如 图 5-64 所 示 。 
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我 05-24 
我 最 近 在 学 APP UI 设计 ， 发现 ps 好 多 问题 不 迟 ， 特 意 来 请 教 大 神 。 


图 5-64 输入 文字 
找 贝 第 一 个 圆 的 图 层 样 式 ， 粘 
贴 到 两 个 图 层 上 ， 如 图 5-66 





1]o 


所 示 。 





我 0524 
我 最 近 在 学 APP UI 设计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 来 请 教 大 神 。 





图 5-66 粘贴 图 层 样式 
复制 前 面 的 网 层 ， 然 后 调整 位 
置 ， 如 图 5-68 所 示 。 
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我 0524 
我 最 近 在 学 APP UI 设 计 ， 发现 ps 好 多 问 古 不 慌 ， 特 意 来 请 教 大 神 。 


小 小 设计 师 05229 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 





5-68 复制 图 层 并 调整 位 置 





我 05-24 


图 5-63 绘制 图 形 
用 同样 的 方法 绘制 图 形 ， 如 图 
5-65 所 示 。 


我 05-24 
我 最 近 在 学 APP UI 设计 ， 发 现 ps 好 多 问题 不 慌 ， 特 意 来 请 教 大 神 ， 


0) 
DD 


其 
他 

图 5-65 绘制 图 形 站 

拖 入 素材 创建 剪贴 莹 版， 并 输 。 民 
入 文字 ， 如 图 5-67 所 示 。 本 
证 





我 最 近 在 学 APP UI 设计 ， 发现 ps 好 多 问题 不 慌 ， 特 意 来 请 教 大 神 。 


sii 


小 小 设计 师 05:29 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 
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图 5-67 拖 入 素材 并 输入 文字 
使 用 “椭圆 工具 ”绘制 正 圆 ， 
如 图 5-69 所 示 。 


我 0524 
我 最 近 在 学 APP UI 设计 ， 发 现 ps 好 多 问题 不 慌 ， 特 意 来 请 教 大 神 。 


小 小 设计 师 05:29 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


5-69 绘制 正 圆 


201 





名 2 photoshop 创意 狗 pp 元 素 设 计 从 入 门 到 精通 
更 岛 UI 








] OQ 使 用 绘图 工具 绘制 图 形 ， 如 图 » () 粘贴 图 层 样式 , 如 图 5-71 所 示 。 
SEO 未 


我 0524 


a 我 最 近 在 学 APP Ul 设计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 未 请 教 大 神 。 
我 最 近 在 学 APP UI 设 计 ， 发 现 ps 好 多 问题 不 慌 ， 特 意 来 请 教 大 神 。 


小 设计 项 05:29 OV 0529 - 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 : PA 新 手 吊 ? 给 你 发 一 个 新 手 入 门 的 教程 SS i 





图 5-70 绘制 图 形 图 5-71 粘贴 图 层 样式 


) ] 使 用 绘图 工具 绘制 图 形 ， 如 图 儿 昌 使 用 “ 横 排 文字 工具 ”绘制 文本 
G12 证 光 


框 并 输入 文字 , 如 图 5-73 所 示 。 







我 05-24 
我 最 近 在 学 APP UI 设计， 发 现 ps 好 多 问题 不 懂 ， 特 意 来 请 教 大 神 。 


我 0524 
我 最 近 在 学 APP Ul 设计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 未 请 教 大 神 。 


小 小 设计 锋 05:29 ; 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 \ i | 


小 小 设计 项 05:29 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 






我 05-30 
5 不 奸 了 ;等 下 我 下 淹 了 独 兰 ; " 洗 有 不 催 请 请 教 你 ”谢谢 天 中 
5 种 的 帮助 人 


D-------------------- -i 蔬 
图 5-72 绘制 图 形 图 5-73 输入 文字 


蝎 3 使 用 “ 圆 角 矩形 工具 ”绘制 2 4 使 用 “ 横 排 文字 工具 ”输入 文字 ， 
角 窍 形 ， 如 图 5-74 所 示 。 如 图 5-75 所 示 。 


我 0524 
我 最 近 在 学 APP Ul 设计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 未 请 教 大 神 。 


我 0524 
我 最 近 在 学 APP Ul 设计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 未 请 教 大 神 。 


小 hit 项 05:29 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


小 由 设计 病 05:29 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


我 05-30 
大 好 了 等 下 我 下 完了 看 和 再 有 不 全 再 请 教 你 ， 诈 放大 国生 下 下 下 下 于 


太 好 了 ， 等 下 我 下 完了 看 看 ， 再 有 不 屋 再 请 教 你 ， 谢 谢 大 
神 的 帮助 





图 5-74 绘制 圆 角 和 矩 形 5-75 输入 文字 





OD 绘制 贺 角 和 窍 形 并 输入 文字 ， 如 20 复制 前 面 的 图 层 ， 然 后 调整 位 


图 5-76 所 示 。 置 并 进行 修改 , 如 图 5-77 所 示 。 


我 0524 
我 最 近 在 学 APP Ul 设计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 来 请 教 大 神 。 


我 0524 


我 最 近 在 学 APP Ul 设计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 来 请 教 大 神 。 
小 小 设计 独 05:29 ” 
| 新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 (2 \ 


小 小 设计 项 05:29 | 
新 手 吊 ? 给 你 发 一 个 新 手 入 门 的 教程 一 | 
~ 我 05-30 
太 好 了 ， 等 下 我 下 完了 看 看 ， 再 有 不 屋 再 请 教 你 ， 谢 谢 大 
视 的 帮助 past 


我 05:30 ; 
,Po 再 有 不 懂 再 请 教 你 ， 谢 谢 大 je 
点 击 下 载 有 不 懂 就 问 ， 大 家 共同 学 习 ， 看 完了 可 以 发 个 临 幕 过 来 看 看 ， 帮 
你 点 评点 评 












一 


图 5-76 输入 文字 图 5-77 复制 并 修改 


W | 使 用 “ 圆 角 和 矩形 工具 ”绘制 圆 
角 和 定形， 并 议 站 图 层 的 不适 明 -AS 
度 为 30%， 如 图 5-78 所 示 。 es 


小 小 设计 锚 05:29 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


~ 





| 多 我 05-30 
太 好 了 ， 等 下 我 下 完了 看 看 ， 再 有 不 情 再 请 教 你 ， 谢 谢 大 
其 神 的 帮助 17 MB 新 手 入 门 


小 小 设计 师 05:40 
有 不 懂 就 问 ， 大 家 共同 学 习 ， 看 完了 可 以 发 个 临 事 过 来 看 看 ， 帮 
你 点 评点 评 


mm 





图 5-78 绘制 圆 角 和 矩 形 





样式 MT): 内 笑 面 ~ 
方法 (Q): 平滑 ~ 景 多 | ;| 如 图 Sh 所 示 。 


深度 DO): Am 100 % 


斜面 和 浮雕 S 、 66 人 VE 国人 929 6 J» 66 
结构 曙 为 图 层 汪 加 “和 斜面 和 浮 册 eae (li 




















方向 : @@ 上 DO 下 投影 
大 小 (ZE 4 像素 等 高 续 结构 
软化 FI 一 0 像素 图 素 混合 模式 6): 正常 ~ 国 国 
阴影 等 高 绪 : 门 消 除 锯 上 不 透明 度 (0): 一 39  % 
[Bs :| | 上 | 消除 锯齿 人) 
角度 (人 N): 90 度 有 角度 (A): | ， |) 90 度 回 使 用 全 局 光 (G) 
( 8 中信 有 全 局 范围 RR): 加 ”84 |% 中 高 D: 4 一 0 像素 
高 度 : 一 度 扩展 R): A 一 一 0 % 
光泽 等 高 线 : FP] ] 消除 锯齿 大 小 5): SS 2 代表 
高 光 模 式 (H)， 正常 v 品质 
不 透明 度 (0): = 100 % 等 高 线 : [A 消除 锯 频 (L) 
阴影 模式 (A): 正常 ~ 杂 色 人 :人 % 
不 透明 度 (C0): zy 100  % 图 层 控 空 投 景 i(U) 
[要 办 值 】 [复位 为 轩 认 值 [设置 jy 信 | | 复位 AM 值 | 

















图 5-79 添加 图 层 样 式 


必 再 次 绘制 圆 角 和 矩形 ， 如 图 5-80 所 示 。 然 后 为 图 层 添加 “ 描 边 ”和 “内 阴影 ” 样 
式 ， 如 图 5-81 所 示 。 
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壮 汉 没 日 国 河 亡 六 





我 0524 
我 最 近 在 学 APP UI 设 计 ， 发 现 ps 好 多 问题 不 懂 ， 特 意 未 请 教 大 神 。 


4 小波 计 锚 0529 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


我 05: 
A 等 下 我 下 完了 看 看 ， 再 有 不 情 再 请 教 你 ， 谢 谢 大 


小 小 设计 师 0540 |， 
有 不 情 就 问 ， 大 家 共同 学 习 ， 看 完了 可 以 发 个 临 事 过 来 看 看 ， 帮 和 | 
你 点 评点 评 


ee 


图 5-80 绘制 圆 角 算 形 


我 0524 
我 最 近 在 学 APP UI 设计 ， 发 现 ps 好 多 问题 不 惯 ， 特 意 未 请 教 大 神 。 


小 小 设计 策 05:29 
新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


我 0530 
太 好 了 ， 等 下 我 下 完了 看 看 ， 再 有 不 懂 再 请 教 你， 谢谢 大 | 
入 的 帮助 17 MB 新 手 入 门 .psd 


直击 下 载 


小 小 小 计策 0540 
有 不 情 就 问 ， 大 家 共同 学 习 。 看 完了 可 以 发 个 临 带 过 来 看 看 ， 帮 
你 点 评点 评 


图 5-82 图 形 效 果 









































描 边 内 阴影 
结构 结构 
大 小 (5): 上 3 ”像素 混合 模式 (6): 正片 县 底 ~ 国 硬 
位 置 (p)， 内 部 > 不 透明 度 (0): 七 4 和 7 ， % 
并 合 模式 介 ): 正常 : 角度 (A): | 120 。” 度 回 使 用 全 局 光 (G) 
不 透明 度 (D): 3468  %% np 
距 高 D): 分 0 ”像素 
填充 类 型 (F): 颜色 v 阻塞 QO: 一 一 39  % 
疡 色 : 国 国 大 小 (5): 本 7 像素 
品质 
等 高 线 : } - 回 注 余 据 占 (0) 
杂 色 (N): 6 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | | 设置 为 默认 值 | | 复位 为 默认 值 | 























图 5-81 添加 图 层 样式 
3() 蛙 击 “确定 ”按钮 后 的 图 像 如 图 
132 la 
0 ] 使 用 “椭圆 工具 ”绘制 正 圆 ， 如 图 
We 


小 小 设计 师 05>40 
有 不 民 就 问 ， 大 家 共同 学 习 ， 看 完了 可 以 发 个 临 事 过 来 看 看 ， 帮 
你 点 评点 评 





图 5-83 绘制 正 圆 


为 图 层 添 加 “和 斜面 和 浮 导 ”“ 描 边 ”“ 内 阴影 ”“ 内 发 光 ”“ 光 译 ” 和 “外 发 沧 ” 
样式 ， 如 图 5-84 所 示 。 


































































































Us 描 边 内 阴影 
注入 关 构 结构 
样式 (T): 内 斜面 ~ 
方法 (Q): 平滑 v 大 小 G): 全 3 像素 混合 模式 介 ): 亚 加 
深度 D): 35 100 。%% 位 置 (P); 外 部 不 透明 度 (D): 4 1 % 
方向 : | © 下 、 me Ce 
Br 混合 模式 (6): 正常 角度 (A): (|120 ” 度 同 使 用 全 局 光 (G) 
:PP 不 透明 度 (O): 14 % ~— 
软化 :6 0 上 上 距离 0): 1 像素 
人 度 填充 类 型 FF): 颜色 ~ 阻塞 (0): 人 0 % 
度 (从 ): 120 三 辣 
wy, 亲人 有 全 新 名 : 国 呈 大 小 (5): G 0 “像素 
高 度 : 度 
品质 
光泽 等 高 线 ; i 回 消除 锯齿 (0 区 
人 等 高 线 : - 辣 消 际 锯齿 (0) 
不 透明 度 (D): 大 35  % 杂 色 (N): 4 % 
阴影 模式 (A): 要 加 ~ 国 国 
不 肖 明 度 (C): 5 % [ 设 村 为 惑 认 值  [ 复位 为 默认 值 | | 设置 为 默认 值 | | 复位 为 默认 值 | 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
内 发 光 ve™ 四 发 光 
结构 光泽 结构 
结构 
混合 模式 (6): 县 加 二 混合 模式 他) 柔 光 了 
不 通明 度 (0): 85  % 混合 模式 (6): 到 加 ~ 国 加 不 透明 度 (0): 本 ”% 
杂 色 (N): G 0 “局 不 透明 度 (0): 一 y= 33  % 杂 色 (N): 6 0 %% 
加 [| 本 
8 | - 
图 素 角度 :| *， ] 90 度 i 
i a ee 距离 DO): 11 ”上 像素 方法 (Q): 条 和 ~ 
msc < 5 大 小 人) 14 。 像素 cbse 一 人 
大 小 (5): 1 ”像素 | -| 站 消除 锯齿 (0) - 和 
品质 可 反 相 人 品质 
等 高 线 : 出 回 ] 消除 回 具 人 
高 回 !: 上 小 ~ 5 
加 | | 消除 锯 上 由 设置 为 默认 值 复位 为 默认 值 
范围 RR): 2Z5 % 范围 (R): % 
拉动 0): G 0 % 持 动 QO): CS 0 % 
[_ 设置 为 默认 值 | [ 复位 为 默认 值 | | 设置 为 默认 值 」 | 复位 为 上 默认 值 | 
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5-84 添加 图 层 样 式 








和 执行 确定 操作 后 的 图 像 如 图 pl 添 加 系 材 创建 总 贴 绽 版 ， 如 图 
5-85 所 示 。 5-86 所 示 。 


小 小 设计 师 05%0 < 小 小 设计 师 05%0 
有 不 懂 就 问 ， 大 家 共同 学 习 ， 看 完了 可 以 发 个 临 事 过 来 看 看 ， 帮 有 不 懂 就 问 ， 大 家 共同 学 习 ， 看 完了 可 以 发 个 临 事 过 来 看 看 ， 帮 
你 点 评点 评 一 站 你 点 评点 评 





5-85 图 像 效 果 


I 中 复制 图 层 ， 并 调整 到 右 侧 ， 然 后 输 
pa ee a ie AN 

Lb Ob 继续 输入 文字 完成 制作 ， 如 图 

5-88 所 示 。 CE 


新 手 啊 ? 给 你 发 一 个 新 手 入 门 的 教程 


我 05-30 
太 好 了 ， 等 下 我 下 完了 看 看 ， 再 有 不 司 再 请 教 你 ， 谢 谢 大 
神 的 生 且 17 MB 新 子 入 门 


小 小 设计 师 05:40 


户 
可 ma 
DD 






Ey 就 问 ， 大 家 共同 学 习 ， 看 完了 可 以 发 个 临 事 过 来 看 看 ， 帮 
你 点 评点 评 
小 小 设计 师 05>40 甘 
有 不 民 就 问 ， 大 家 共同 学 习 。 看 完了 可 以 发 个 临 事 过 来 看 看 ， 帮 Es 
—opo 你 点 评点 评 他 
ee 一 一 一 
界 
~ OK。 文件 我 下 完了 ， 我 菇 发愤 学 习 面 
元 
设 
1 


图 5-87 复制 图 层 并 输入 文字 图 5-88 完成 制作 


CE 操作 提示 对 话 拒 


在 APP 界面 中 进行 某 些 操作 后 会 弹出 提示 或 反馈 对 话 框 ， 本 市 将 介绍 操作 提示 对 话 
框 的 制作 ， 图 5-89 所 示 为 制作 流程 图 。 


Football Fantasy 


Lionel Messi 


FC Barcelona 


Hulk 
FC Zenit 





图 5-89 制作 流程 图 


() 在 Photoshop 中 打开 一 张 素 (})2 使 用 “ 圆 角 和 矩形 工具 ”绘制 
材 图 所 作为 背景 ， 如 图 5-90 出 角 和 矩形 ， 如 图 5-91 所 示 。 
所 示 。 
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5-90 打开 图 片 


0 


案 敬 加 ”和 “投影 ” 


















































图 5-91 绘制 圆 角 矩形 





为 图 层 添 加 “斜面 和 浮 膨 ”“ 等 高 线 ”“ 内 发 光 ”“ 颜 色 登 加 ”“ 渐 变 登 加 ”“ 图 
性 a ba NS 2 i 




































































斜面 和 浮 了 内 发 泡 
结构 结构 
样式 (1): 内 斜面 混合 模式 (6): 小 色 ” 
方法 Q): 平时 不 透明 度 (o): ， 4 % 
深度 D) AR 100 % 杂 色 M: 他 S 0 % 
廊 向 @| 上 QO 下 了 国友 > | 
大 小 (Z): 全 像素 图 素 
软化 P): = 一 一 0 像素 
方法 (Q): 柔和 ~ 
阴影 eo ph. 
角度 MW: 。 60” 讼 产 : 品 居中。 加 边 媒 (6) 
(am 阻塞 (0O): 0 % 
] 使 用 全 局 光 (G) 等 高 线 颜色 副 旋 
识 5 度 如 A 小): 5 4 你 8 - 
光泽 等 高 线 : 回 清关 所 具 () SE | "| tai) 品质 混合 模式 B， 正 党 - 固 林 
范围 R): < 二 而 一 % 过 不 通明 讼 (0): 于 % 
pay 等 襄 线 : | L [向 坟 值 ] [让 位 为 内 值 ] 
Epa, = [Ea 范围 (a): [A 9 
阴影 模式 @): EA ~ > 
不 透明 度 (C0: 一 一 0 ” % 
| 设置 为 默认 值 | | 复位 为 默认 值 | [ 设 理 加 认 人 入 | 夏 们 山 认 什 
变 图 案 到 加 
新 要 加 Ee 一 投影 
渐变 结构 
混合 模式 (0) 正常 ~ 辣 仿 色 混合 模式 (6): 柔 光 a 
不 透明 度 (p): 站“ % 不 透明 度 Q): D % 混合 模式 (6): 正常 ~ 国 国 
区: | 站 反射 () 不 透明 度 
样式 (): 线性 ~ 团 与 图 层 对 齐 (0 图 案 : 司 | [ 贴 竖 原 点 () 时 
(全 角度 (A): | | 90 度 回 使 用 全 局 光 (G) 
角度 Mi 人， ) 90 度 网 下 = 5 We 驻 已 
缩放 (S): 100  % 回 与 图 层 链 接 仅 距离 (0): 2 像素 
[ 设置 为 点 认 值 | [ 复位 为 默认 值 | | 设置 为 默认 值 ”| | 揽 位 为 默认 值 | 扩展 R): (一 0  % 
大 小 (5S): G5 0 像素 




















U 


5-92 


单 击 “确定 ”后 的 图 像 效 
果 如 图 5-93 所 示 。 





图 5-93 图 像 效果 
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添加 图 层 样式 
UD : 将 其 转换 为 智能 对 象 ， 然 后 为 图 层 
添加 “投影 ”样式 ， 如 图 5-94 所 示 。 
投影 - 
一 结构 
混合 模式 (6): 正片 又 底 ~ 国 国 
不 透明 度 (0): se 30 %% 


了 
Tm, 





角度 内 :| | 


| 30 


度 | 使 用 全 局 光 (6) 


朝 喜 
% 
像素 











距 记 (0): = 7 
扩展 俱 ] :5 0 
大 小 国生 

图 5-94 添加 “投影 ”样式 





() 执行 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 ， 在 打开 的 对 话 框 中 设置 数量 ， 如 
图 5-95 所 示 。 单 击 “ 人 确定 ”按钮 后 的 效果 如 图 5-96 所 示 。 


xX 





预 点 (P) 


数量 (A): 叶 。 % 
Oy 





分 布 
名 平均 分 布 (U) 
加 高 斯 分 布 (G) 


加 | 单 色 (M) 

U 7 使 用 “和 矩形 工具 ”绘制 矩形 ， 如 图 
5-97 所 示 。 然 后 为 图 层 添加 “ 摘 边 ” 

样式 ， 如 图 5-98 所 示 。 





5-95 设置 数量 





图 5-97 绘制 矩形 





图 5-96 图 像 效 果 


摘 边 








结构 
大 小 人 je | 1 
位 置 (P): 内 部 ~ 
混合 模式 (6): 正常 Md 
不 透明 度 (0): = 100 
填充 类 型 (F): 颜色 ~ 
颜色 : | 


设置 为 默认 值 和 夏 位 为 默认 值 


像素 


% 





图 5-98 添加 “ 描 边 ” 样 式 


(UN 继续 为 图 层 添加 “内 阴影 ”内 发 光 ” 和 “渐变 又 加 ”样式 , 如 图 5-99 所 示 。 




















一 内 阴影 一 
全 - 
ee ss 混合 模式 (8) 正片 琶 底 ~ 
混合 模式 人 @): 小 色 了 不 透明 度 D) 二 一 5 % 
不 透明 度 (O): ZS 36 % 杂 色 NN): 3 7!1 % 
/Ap a @ 国 O ?| 
角度 (A): (| ) 8 度 回 使 用 全 局 光 (G) a E 
~ - 图 素 
Ho | 
距离 吕 ): 己 2 像素 方法 Q): 柔和 ~ 
阻塞 (0): G 0 源 :@ 居中 全 中 边 如 (6) 
大 小 (5): G 0 像素 阻塞 (CO): 5 0 % 
二 大 小 (5): G 0 像素 
- 品质 
高 ， 人 这 消 际 占 3 
ES [A ] RR) $8 | S| 口 潭 Si 上 0 
杂 色 人 N): G 0 % 范围 R): 50  % 














拉动 Q): G 0 % 





[设置 为 默认 值 | | 复位 为 上 默认 值 | 








| 设置 为 默认 值 | | 复位 为 默认 值 | 














图 5-99 添加 图 层 样 式 





























一 渐 训 要 加 - 
新 
混合 模式 (0)， 正常 > 
不 和 明度 P): 一 一 一 一 一 
i | 
样式 0; 线性 - 
角度 WY: (| ) 50 度 


缩放 (5): = 全 - 


回 仿 色 
5 % 





D&IR) 











与 图 层 对 褒 们 


100 % 





| 设置 为 默认 值 | | 复位 为 默认 值 | 
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7 Ca Nn 一 七 ) 
和 于 江 洲 站 国良 记 半 2 3 下 








单 击 “确定 ”按钮 后 的 图 像 效 果 


如 图 5-100 所 示 。 


10 





复制 图 层 并 调整 位 置 ， 如 
图 5-101 所 示 。 





二 


] ] 






ol 


图 5-100 图 像 效果 


图 5-101 复制 图 层 


使 用 “ 圆 角 矩形 工具 ”和 “椭圆 工具 ”绘制 图 形 ， 如 图 5-102 所 示 。 然 后 为 图 
层 添 加 “和 斜面 和 浮雕 ”和 “等 高 线 ” 图 层 样 式 ， 如 图 5-103 所 示 。 


wm 


图 5-102 绘制 图 形 


续 为 图 层 添加 “内 发 光 ”“ 颜 色 厨 加 ”“ 渐 变 早 加 ”“ 图 生 


样式 ， 如 图 5-104 所 示 。 
































图 案 到 加 
图 案 
混合 模式 (6): 


不 透明 度 (人 ): 


图 案 : 


第 放 人 (全 ): 

















荣光 bd 
2 100 96 
回 |[ 贴 紧 原 点 (A) | 
CS 50 9o 
避 与 图 层 链 接 () 











设置 为 默认 值 复位 为 默认 值 











208 


























斜面 和 浮 睦 
结构 

样式 (1): 内 斜面 

方法 Q): 平滑 

深度 D): 5 Wm % 

和 :@ 上 © 下 

大 小 (D): Ce 像素 

软化 PD): C= 一 。 像素 
阴影 等 高 线 

角度 (VY): .。 90 度 图 素 

【 。 ) 回 使 用 全 局 光 (G) 

高 度 : “一 0 度 等 高 线 : 4 | | | 消除 锯齿 (L) 
FS | S| sta 范围 (R): 10  % 
高 光 模 式 (H): 正常 ~ 
不 透明 度 (o):， 一 一 30 % 
阴影 模式 (A): 正片 县 底 ~ 国 国 
不 透明 度 (c): 5 0  % 

[设置 为 默认 值 | | 复位 为 默认 值 | 




















内 发 光 
混合 模式 (6): 滤 色 ~ 
不 透明 度 (o): 后 4 ， %% 
杂 色 (N): (5 0 % 
6 >] ee 
图 素 颜色 到 加 
方法 Q): 柔和 ~ 颜色 
源 : 喇 居 中介 。 回 边 旨 (9) 混合 模式 (6): 正常 ~ 国 国 
阻塞 (QO: 4 0  % 不 透明 度 (O): 45  % 
大 小 (5): 下 4 像素 
品质 [|_ 设 置 为 默认 值 | | 复位 为 默认 值 | 
等 高 线 : | -| ] 消除 锯齿 () 
范围 (R): zs 50 % 
拉动 0): < 0 %% 
| 设置 为 默认 值 | | 复位 为 默认 值 | 


图 5-103 添加 图 层 样 式 








车 加 9? 和 (44 用 县 29 
渐变 县 加 
渐变 
混合 模式 (0): 正常 ~ 回访 色 
不 透明 度 P): ”10 % 
浙 交 ; |v| 癌 反 向 w) 
样式 (D): 线性 了 ” 团 与 图 层 对 齐 人 0) 
角度 (N): | | 190 度 
缩放 (5): 一 七 100 % 
| 设置 为 默认 值 。| | 复位 为 默认 值 | 























;发 襄 模式 公 ): 正常 
不 透明 度 (0): 一， 100 


”Ml 


0 


前 度 (A): ( ? ) -0 ” 度 [使 用 全 局 浇 (5) 


Se 


距离 D): 上 一 一 > 2 像素 
扩展 人 h): A 0 物 
太 小 5S): 本 0 像素 








5-104 添加 图 层 样 式 











| 下 执行 确定 操作 后 的 图 像 效 果 
如 图 5-105 所 示 。 
| 4 将 岁 形 转换 为 智能 对 象 ， 并 
为 图 层 添加 “投影 ”样式 ， 
如 图 5-106 所 示 。 























投影 
结构 
混合 模式 (6): 正片 县 底 ~ 国 因 
不 透明 度 (D): zs 30 % 
角度 (A): | ， | -0 ” 度 回 使 用 全 局 光 (G) 
距离 O): 上 像素 
扩展 RQ): Ce 0 % 
大 小 (5): 本 6 ”像素 
图 5-105 图 像 效 果 5-106 添加 “投影 ”样式 





] 站 aas Ee OE 
”命令 ， 在 打开 的 对 话 框 中 设置 
参数 ， 如 图 5-107 所 示 。 
| 单 击 “ 确 定 ” 按 钮 后 的 图 像 效 果 如 
图 5-108 所 示 。 





了 点 (P) 


日 
数量 (A): 图 % 
分 布 - 


名 平均 分 布 {U) 
加 高 斯 分 布 (6) 


yj 单 色 (M) 




















图 5-107 设置 参数 图 5-108 图 像 效果 


| MM 使 用 “椭圆 工具 ”绘制 正 贺 ， 如 图 5-109 所 示 。 








图 5-109 绘制 正 圆 
| 为 图 层 湛 加 “内 阴影 ”“ 内 发 光 ”“ 渐 变 夺 加 ”和 “投影 ”图 层 样 式 ， 如 图 
5-110 所 示 。 
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6) < 
UD 


平 泪 沛 相国 酒 记 六 





意 者 pp 元素 设计 从 入 门 到 精通 




























































内 发 光 
内 阴影 a 
结构 
混合 模式 6): 亚 加 下 
混合 模式 (6): 柔 光 ~ 国 国 不 透明 度 DA 1 % 
不 透明 度 (D): D100 % 杂 色 (N): G i % 
| o 国 
角度 :人 | ) 8 度 加 使 用 全 局 光 (G) 二 
距离 D): 全 2 像素 方法 (Q): 柔和 ~ 
渐变 到 加 投影 
阴 塞 QO: A 一。 % 源 : 口 居中 国 。 问 边 这 (6) 站 结构 
大 小 (5): 上 5 4 像素 阳 塞 (0: C= 一 一 0 % 混合 模式 (0): 条 光 ~ 回 念 色 
大 小 (5): < 二 13 ”像素 不 通明 度 P): 一 一 0 混合 模式 (6): 又 加 ~ 
0 品质 六 | Rfar) 不 透明 度 (0): 一 一 0  % 
和 和 样式 (): 线性 > 回 与 图 层 对 齐 和 
等 高 线 ; [4 问 清 脓 锯齿 () 4 角度 (A): | ! ) 5 度 回 光 (G 
$8: | S| 口 济 SO AM (OMB =—— 县 一 使 用 全 局 光 () 
人 藻 | — 
杂 色 人 N): 人 % 范围 (R): ZT 50 % 缩 波 (5): 一 100 % 距离 |D): 人 1 像素 
- - {4h0): G 0 加 扩展 (R): 4 0  % 
| 设置 为 默认 值 _| | 复位 为 默认 值 | [| [大 位 为 于 认 值 . 
[办 什 】 [如 位 为 默认 售 大 小 6): 6 1 入 素 

















图 5-110 添加 图 层 样式 
单 击 “ 确 定 ” 按 钮 后 的 图 像 效 使 用 “椭圆 工具 ”绘制 正 圆 ， 
果 如 图 5-111 所 示 。 并 修改 填充 颜色 为 绿色 ， 如 图 
el ii 








图 5-111 图 像 效 果 图 5-112 绘制 正 圆 


为 图 层 添加 “人 冬 面 和 浮雕 ”“ 等 高 线 ”“ 内 及 光 ”“ 渐 变 登 加 ”和 “投影 ”图 
层 样式 ， 如 图 5-113 所 示 。 













































































射 面 和 学 由 
结构 
样式 (T): 内 介面 。 
方法 Q): 平时 。 
深度 D): 上 30 % 
方向 : @@ 上 OF 下 定 
EE 内 发 光 
大 小 @: 6 2 像素 等 高 线 结构 
软化 F: SG 一 一 0 像素 
阴影 - 图 素 混合 模式 (6): 正片 县 底 
角度 N: 550 讼 等 高 线 : | -| 丫 消 禾 锯 具 Q Se 5 
( 。 ) 回 使 用 全 局 光 (G) 杂 色 (N): ZS 71 % 
高 度 “一 0 度 范围 R): 二 = 一 他 50  % © 图 oO | 
光泽 等 高 线 : | -| $60 天 过 
高 光 模 式 (0): 正常 
不 透明 度 (0O): 和 0 史 I 柔和 ~ 
阴影 模式 (A): 正片 又 底 ~ 国 硬 源 :@ 居中 全 加 边 毕 (6) 
不 透明 度 (): 50  % 阻塞 (0): 4 0 % 
[加 认 入 |】 [有 位 为 际 认 信 大 小 (5): 6 0 像素 
-TT 
ee 一 投影 一 _ | 
ps 蝴 构 
混合 模式 (0): 要 加 ~ 回 仿 色 | 
不 透明 度 (p): ~ 本 %% 混合 模式 人 ): 正片 又 底 - 国 国 
MK | RAN 不 透明 度 Dj: 一 27 一 一 本 。 % 
样式 (0D): 线性 v ”|v 与 图 层 对 齐 (D) ~ 
A 角度 他 :4 | 0 度 加 | 使 用 全 局 光 介 ) 
角度 :| :1s0 度 hv 
缩放 (5): 一 zs 100 约 距离 (0D): 已 2 像素 
设置 为 默认 值 复位 为 默认 值 
杰 小 (5S): 本 ' 4 像素 | 
| = | 














图 5-113 添加 图 层 样 式 
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ja 


图 5-114 所 示 。 


执行 确定 操作 后 的 图 像 效 来 如 


使 用 绘图 工具 绘制 图 形 ， 如 图 
Sls 


pn 





图 5-114 图 像 效果 


图 5-115 绘制 图 形 


) 4 为 图 层 添加 图 层 样式 ， 如 图 5-116 所 示 。 





渐变 到 加 
渐变 
混合 模式 (D): 正常 v 门 仿 色 
不 透明 度 (P): = 100 % 
潮 变 : een] 回 反 向 人 
样式 (0D): 线性 v 加 与 图 层 对 齐名 


角度 WW: | 上 ) 8 度 


缩放 (5): 


设置 为 默认 值 复位 为 默认 值 





100 % 





图 5-116 添加 图 层 样 式 











en 
站 构 一 5 
混 言 模式 (6):” 正片 到 底 ~ 国 国 

不 透明 度 (D) 一 60  % App 

角度 (A): | | 1 60 度 加 使 用 全 局 光 ( 本 

距 敲 {OD): 全 1 像素 界 

扩展 Ri /一 0 % . 

二 小心 i . 1 作 素 素 

设 

汗 


执行 确定 操作 后 的 效果 如 图 5-117 所 示 。 单 击 鼠 标 右 键 ， 执 行 “ 揽 贝 图 层 样 陈 ” 
命令 。 然 后 用 同样 的 方法 绘制 图 形 ， 如 图 5-118 所 示 。 








图 5-117 图 像 效 果 


遇 O 粘贴 图 层 样 式 , 然后 修改 “ 投 
影 ” 样 式 ， 如 图 5-119 所 示 。 





图 5-118 绘制 图 形 


执行 确定 操作 后 的 图 像 效 果 
如 图 5-120 所 示 。 


mill 
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一 站 


混合 模式 (6):， 正片 一 底 - 国生 
不 透明 度 {0): 二 = 60 他 


角度 (9): | | | 80 度 轩 使 用 全 局 光 人 G) 


距离 D0): /一 2 ”像素 
扩展 R): 一 0 % 


大 小 (9): 站 2 像素 








图 5-119 修改 “投影 ”样式 图 5-120 图 像 效果 
小 在 上 方 绘制 图 形 ， 如 图 5-121 几 粘贴 图 层 样 式 ， 效 果 如 图 5-122 
所 示 。 所 示 。 





图 5-121 绘制 图 形 图 5-122 粘贴 图 层 样式 后 的 效果 


3() 使 用 “椭圆 工具 ”绘制 正 圆 ， 了 ] 粘贴 下 方 窍 形 的 图 层 样 式 ， 


然后 添加 系 材 并 创建 筋 贴 蒙 
版 ， 如 图 5-124 所 示 。 


如 图 5-123 所 示 。 





图 5-123 绘制 正 圆 图 5-124 添加 素材 并 创建 剪贴 蒙 版 
hi 绘制 正 圆 并 琴 加 图 层 样 式 ， 3 使 用 “椭圆 工具 ”绘制 圆 ， 
如 图 5-125 所 示 。 并 使 两 个 圆 中 心 对 齐 ， 如 图 


5-126 所 示 。 











图 5-125 绘制 圆 并 粘贴 图 层 样 式 图 5-126 绘制 圆 
了 为 图 层 添 加 图 层 样 式 ， 琴 加 后 3 门 使 用 同样 的 方法 添加 素材 ， 然 后 
的 效果 如 图 5-127 所 示 。 绘制 图 形 并 输入 文字 ， 完 成 效果 
如 图 5-128 所 示 。 





一 Football Fantasy 

Lionel Messi 9 

FC Barcelona 4 
APP 

其 

Hulk 他 

FC Zenit BB 

面 

元 

素 

设 
jE 

图 5-127 添加 图 层 样式 后 图 5-128 完成 效果 





SA 、N 
人 议 计 
A 手机 主页 上 的 时 间 、 天 气 、 音 乐 控件 是 非常 常见 的 ， 也 是 APP 
(ey We) Ul 设计 的 重要 元 素 之 一 ， 如 图 5-129 所 示 。 





图 5-129 手机 主页 
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pp 元 未 没 计 从 入 门 到 粮 通 


、 讨 天 气 活 任 


Photoshop 创意 





天 气 插件 一 般 包 括 天 气 图 标 、 温 度 、 时 间 、 日 期 等 信息 ， 根 据 不 同 的 布局 将 天 气 与 时 


ey ) 


间 重 点 显示 。 下 面 介绍 天 气 插件 的 制作 ， 图 5-130 所 示 为 制作 流程 图 。 


28Max ] 4in 





图 5-130 制作 流程 图 


(0 | 使 用 “ 圆 角 矩 形 工 具 ” 绘 制 圆 角 和 矩形 , 如 图 5-131 所 示 。 然后 为 矩形 添加 “内 阴影 ” 
和 “内 发 光 ” 图 层 样 式 ， 如 图 5-132 所 示 。 




















内 阴影 Es 
关 
混合 模式 (6): 滤 色 ” 
混合 模式 (6): 亚 加 | 不 通明 度 O): 一 7 一 如 % 
不 透明 度 (O): 56  % 杂 色 (N): 4 % 
© 图 
前 度 (A): | 、 ) 120 ” 度 | 团 使 用 全 局 光 (G) 
距离 人 ): | AA] 1 笃 卖 方法 (9): 柔和 了 
阻塞 (C): 4 0 % 源 :加 居中 人 日 回 边缘 (9) 
大 小 (5S): 人 0 像素 阳 塞 (): = 一 一 0。  % 
大 小 (9): Ce 像素 
品质 
等 高 线 : - 癌 | 消除 锯齿 人) 等 高 线 : | -| 阅 消 除 锯 占 () 
杂 色 人 N): G % 范围 R): 一 Zs 一 % 
拉动 :C= 0  % 





设置 为 默认 值 复位 为 默认 值 





| 设置 为 默认 值 。| | 复位 为 默认 值 | 

















图 5-131 绘制 圆 角 和 矩 形 图 5-132 添加 图 层 样式 


() Wa 续 为 矩形 添加 “渐变 码 加 ”和 “投影 ”样式 ， 如 图 5-133 所 示 。 执 行 确定 操 
作 后 的 效果 如 图 5-134 所 示 。 















































渐变 亚 加 投影 
靳 变 结构 
混合 模式 (6): 正片 县 底 ~ 加 天 
混合 模式 (D): 正常 仿 色 趟 通明 度 (oj: 二 
Es Bm 角度 (A): | ”120 ” 度 回 使 有 全 局 光 (G) 
浙 文 : [| 同上 反 向 (R) wo 4 Ee 
s 全 -=a 
样式 0， 线性 ~ 回 与 图 层 对 齐 四 扩展 :Ce 
角度 N): (| ) 8 度 A 5 一 了 全 
缩放 (5): 一 100  % 
等 高 线 : | - 问 消除 据 齿 () 
设置 为 默认 值 复位 为 默认 值 杂 色 (NN): C % 
团 图 层 挖 空投 影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
图 5-133 继续 添加 图 层 样式 图 5-134 图 像 效果 


() 3 使 用 “ 圆 角 矩形 工具 ”绘制 圆 角 和 矩形， 并 设置 混合 模式 为 “ 登 加 ”、 不 透明 度 
为 69%， 如 图 5-135 所 示 。 
() /| 为 图 层 添 加 遮 量 ， 绘 制 遮 尝 后 的 效果 如 图 5-136 所 示 。 








jp 型 :| 国外 TT 口 明 四 








上 “| 并 明度: 
5-135 绘制 圆 角 和 矩 形 
投影 
结构 


混合 模式 (6): 正片 到 底 ~ 国 国 


不 透明 度 (0): 一 Z>  29 % 














角度 (A): ( 、 )120 度 加 使 用 全 局 X(9) 

距离 {O): (| 2 像素 

扩展 (R): 5 ”0 % 

大 小 (5): 人 2 像素 
品质 

等 高 线 : | - 器 消 闪 据点 人 

杂 色 (N): G 0 % 

可 图 层 控 空 投影 (J) 





图 5-137 添加 图 层 样式 
复制 图 层 并 进行 旋转 ， 效 果 如 
图 5-139 所 示 。 











0 





图 5-139 复制 并 旋转 


U9 为 图 层 添 加 “内 阴影 ”“ 渐 变 堆 加 ”和 “外 有 发光” 图 层 样式 ， 如 图 5-141 所 示 。 


Uo 
U6 


065 


图 5-136 绘制 庶 淖 后 的 效果 


为 图 层 添加 “投影 ” 
如 图 5-137 所 示 。 
使 用 绘图 工具 绘制 图 形 ， 如 图 
jl a 


图 层 样 式 ， 





5-138 绘制 图 形 


使 用 “椭圆 工具 ”绘制 正 圆 ， 
图 5-140 所 示 。 


如 





图 5-140 绘制 正 圆 































































内 阴影 本 外 发 光 
a 结构 
-一 变 一 浊 全 模 二 (FE)， 党 - 
混合 模式 (3)， 正片 又 底 ~ EM [一 人 
不 透明 度 Dj: 一 七 轴 混合 模式 (D): 正常 仿 色 A PE 5 
人 不 透明 度 人 P): 全 100  %% 
角度 (A): | ， | 90 度 回 使 用 全 局 光 (G) a hd 
ee Es WM| OR 本 
EO): CC 0 、 过 ey = 
3 站 本 S 样式 0): 全 v IV 与 图 层 对 齐 (D 柔和 ~ 
- 3， 0 % 
大 小 (5S): Ce 像素 角度 (N): | ) 90 度 大 小 3): 三 8 ”像素 
品质 缩放 (5): 二 100  % 品质 
“i, “Nn. » 和 四 -过 
杂 色 (N): AP 站 设置 为 默认 值 复位 为 默认 值 范围 RR): 一 
拉动 0): G 0  % 
上 设置 为 默认 值 | | 复位 为 默认 值 | [加 认 什 ] [ 夏 位 为 默认 值 ] 























图 5-141 添加 图 层 样式 


pa 


7 Pe NA 一 人 请 
半 夏 浏 引 国 酒 记 灯 名 
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| 执行 确定 操作 后 的 效果 如 图 | | 使 用 “椭圆 工具 ”绘制 正 圆 ， 
BAN 


如 图 5-143 所 示 。 





图 5-142 确定 后 的 效果 图 5-143 绘制 正 圆 


] » 为 图 层 添 加 “内 阴影 "”“ 内 发 光 ” 和 “渐变 琶 加 ”图 层 样 式 , 如 图 5-144 所 示 。 





























内 阴影 内 发 光 渐变 到 加 
结构 结构 渐变 
0 正片 到 底 ~ 国 因 混合 模式 B)， 正 党 混合 模式 (0): 正常 ”| 回信 色 
透明 度 (O): ZS 39  % 
| 不 透明 度 (): D100 % i se Ci 
负 度 A): | ! 0 度 四 使 用 全 局 X%(6) 和 可 渐变 : [E [~] 回 反 向 R) 
距离 D: = 一 0 像素 = OL 样式 (0D): 线性 ~ 辐 与 图 层 对 齐名 
阻塞 CC 0 % | 
大 小 8): 4 一 一 一 一 了。 外 素 图 家 角度 NW: ”) 90 度 
品质 方法 (0): 计生 缩放 G): = 100 % 
| - 回 消除 句点 eT 
ER EE 源 :器 居中 人 日 回 边 纤 (G) [设置 为 默认 值 | [ 复位 为 默认 值 | 
永 色 NIG ”0 % 
阻塞 (0): G 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 大 小 (S): 万 2 像素 
































图 5-144 添加 图 层 样 式 


ee | 3 继续 为 网 层 添加 “投影 ”样式 ， 
混合 模式 (6) 正常 ~ 国 如 图 5-145 所 示 。 


TNO 0 ] A 执行 确定 操作 后 的 图 像 效果 如 图 








角度 (A): (  )120 ” 度 回 使 用 全 局 光 (G) 





























中 高 D): < 一 0 一 一 像素 5-146 所 示 。 
扩展 (R): G 0 % 
大 小 (5): 本 5 像素 
品质 
等 高 线 : | - 趾 | 消除 锯 齿 (L) 
杂 色 (N): 4 0 % 
品 图 层 控 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
图 5-145 添加 “投影 ”样式 图 5-146 确定 后 的 效果 





| 站 继续 绘制 正 贺 ， 并 拨 贝 奖 贴 图 ] 用 同样 的 方法 绘制 图 形 ， 并 烙 
层 样式 ， 如 图 5-147 所 示 。 贴图 层 样 式 ， 效 来 如 图 5-148 
所 未 。 





图 5-147 绘制 正 圆 并 粘贴 图 层 样 式 图 5-148 绘制 图 形 并 粘贴 图 层 样式 








| { 使 用 “ 模 排 文字 工具 ”输入 文学 ， ] 8 使 用 绘图 工具 绘制 图 形 ， 如 图 
如 图 5-149 所 示 。 5-150 


7 oy 


pA 1 4in 2 Buax 14win 





5-149 输入 文字 图 5-150 绘制 图 形 


] 9 为 图 层 添加 “渐变 二 加 ”和 “投影 ”图 层 样式 ， 如 图 5-151 所 示 。 























渐变 要 加 投 
渐变 
- 混合 模式 B) 正片 至 底 -Ml 
混合 模式 (0O): 正常 v 四 | 仿 色 不 透明 度 ): = 一 21  ”% 
不 透明 度 P)， 一 13  % 角度 (A): (C。 二 一 度 回 使 用 全 局 光 (G) 
浙 交 : [| | 丫 反 向 (R) 3 像素 
样式 (): 线性 ~ 回 与 图 层 对 齐 ( ee 
角度 NJ: (上) 50 度 
缩放 人)， sz 100  % ”| 门 济 外 掉 占 (0) 
0 596 
设置 为 默认 值 复位 为 默认 值 同 图 层 控 空投 影 (J) 
| 设置 为 默认 值 “| | 复位 为 默认 值 | 




















图 5-151 添加 图 层 样式 


米 () 执行 确定 操作 后 的 图 像 效 果 如 图 J» | 使 用 “直线 工具 ”绘制 线条 ， 如 
5-152 所 示 。 图 5-153 所 示 。 


_ 
i ) 


2 BVMax ] 4Win 


星期 二 py 


2 BMax ] AMin 





图 5-152 确定 后 的 效果 图 5-153 绘制 线条 


四 册 复制 图 层 ， 然 后 同 下 移动 图 层 ， 并 对 图 形 进 行 高 斯 模糊 ， 旋 转 后 即 完成 了 制作 ， 
如 图 5-154 所 示 。 


2 BMax 1 AMin 





图 5-154 完成 效果 


2 | 








/ > NNm 一 人 请 
衬 油 澳 汕 团 油坊 尊 了 是 3 下 
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\_ 项 音乐 活 件 


下 面 介 绍 音乐 插件 的 制作 ， 图 5-155 所 示 为 制作 流程 图 。 


”要 


hs hs hi 


图 5-155 制作 流程 图 


() ] 打开 又 材 图 片 将 其 作为 背景 ， (})2 使 用 “ 贺 角 和 矩形 工具 ”和 “ 彬 圆 
然后 使 用 绘图 工具 绘制 图 形 ， MEA | sa ee a 
如 图 5-156 所 示 。 所 示 。 


- 中 














图 5-156 绘制 图 形 图 5-157 绘制 图 形 
() 由 使 用 “和 矩形 工具 ”绘制 矩形 ， ()4 使 用 “椭圆 工具 ”绘制 椭圆 ， 


如 图 5-158 所 示 。 如 图 5-159 所 示 。 


CT 


图 5-158 绘制 矩形 图 5-159 绘制 椭圆 
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() 为 图 层 添加 “颜色 闪 加 ”图 层 () 单 击 “确定 ”按钮 后 的 图 像 效 
样式 ， 如 图 5-160 所 示 。 果 如 图 5-161 所 示 。 





着色 谷 加 
颜色 


混 语 模式 (6): 正常 ~ Ol 
不 透明 度 (0): se 100  % 
设置 为 默认 值 复位 为 默认 值 


图 5-160 添加 图 层 样 式 图 5-161 确定 后 的 效果 


QO [i 使 用 “和 矩形 工具 ”绘制 矩形 ， 如 图 5-162 所 示 。 继 续 使 用 “和 矩形 工具 ”绘制 矩形 ， 
并 设置 图 层 混合 模式 为 “ 丢 加 ”、 不 透明 度 为 20%， 如 图 5-163 所 示 。 
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图 5-162 绘制 矩形 5-163 绘制 矩形 并 设置 参数 


O08 使 用 “直线 工具 ”绘制 两 条 直 09 使 用 绘图 工具 绘制 图 形 ， 如 图 
线 ， 如 图 5-164 所 示 。 5-165 所 示 。 





Si ai 


图 5-164 绘制 直线 图 5-165 绘制 图 形 
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© 
提示 : 上 一 步 操 作 中 的 
图 形 都 是 使 用 布尔 运算 绘 

制 出 来 的 ， 如 图 5 一 166 所 示 。 


READINIORE 








5-166 图 形 的 布尔 运算 绘制 


10 使 用 “ 横 排 文字 工具 ”输入 文 ] |] 使 用 绘图 工具 绘制 播放 按钮 ， 
字 ， 如 图 5-167 所 示 。 如 图 5-168 所 示 。 


We We 











qd 中 MM 
5-167 输入 文字 图 5-168 绘制 播放 按钮 
] 绘制 正 圆 并 添加 系 材 图 三 ， | 3 继续 绘制 图 形 并 输入 文字 ， 如 
如 图 5-169 所 示 。 图 5-170 所 示 。 





| 思 








图 5-169 绘制 正 圆 并 添加 素材 5-170 绘制 图 形 并 输入 文字 








] /| 完成 效果 如 图 5-171 所 示 。 





图 5-171 完成 效果 
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\C 陋 吕 设计 师 不 得 不 知 的 安 卓 屏幕 知识 
人 概念 知识 


”分 汶 紊 : 分 辩 率 就 是 手机 屏幕 的 像素 点 数 ， 一 般 描述 成 屏幕 的 “ 宽 X 高 ”， 
安 卓 手机 屏幕 常见 的 分 辩 率 有 480X800、720X1280、1080X1920 等 。 如 
720X280 表示 此 屏幕 在 宽度 方向 上 有 720 个 像素 , 在 高 度 方向 上 有 1280 个 像素 。 

@@。 屏幕 大 小 : 屏幕 大 小 是 手机 对 角 线 的 物理 尺寸 ， 以 英寸 (inch) 为 单位 。 如 某 
手机 为 “5 寸 大 屏 手 机 ”, 就 是 指 对 角 线 的 尺寸 ,5 寸 X2. 54 厘 米 / 寸 =12.7 厘 米 ， 
如 图 5-172 所 示 。 
密度 (dpi，dots per inch; 或 ppi, pixels per inch) : 

从 英文 顾名思义 ， 就 是 每 英寸 的 像素 点 数 ， 数 值 越 

高 显示 越 细 腻 。 如 我 们 知道 一 部 手机 的 分 辩 率 是 
1080X1920， 屏 幕 大 小 是 5 英寸 ， 能 和 否 算出 此 屏幕 的 密 

度 呢 ? 其 实 只 需要 算出 对 角 线 ， 根 据 中 学 时 学 的 勾 股 

定理 可 以 得 出 对 角 线 的 像素 数 大 约 是 2203， 用 2203 除 RN 
以 5 就 是 此 屏幕 的 密度 了 ， 计 算 结 果 是 440。440 dpi 

的 屏 幕 已 经 相当 细 肛 了 。 图 5-172 屏幕 大 小 





四 实际 密度 与 系统 密度 


这 里 说 的 “实际 密度 ”是 指 我 们 自己 算出 来 的 密度 ， 这 个 密度 代表 了 屏幕 真实 的 细腻 
程度 ， 如 上 述 例子 中 的 440 dpi 就 是 实际 密度 ， 说 明 这 块 屏幕 上 每 寸 有 440 个 像素 。5 英寸 
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1080 x 1920 的 屏幕 密度 是 440， 而 相同 分 辩 率 的 4.5 英寸 的 屏幕 密度 是 490。 如 此 看 来 ， 
屏幕 密度 将 会 出 现 很 多 数值 ， 呈 现 严 重 的 碎片 化 。 而 密度 又 是 安 卓 屏幕 将 界面 进行 缩放 显 
示 的 依据 ， 那 么 安 卓 是 如 何 适 配 这 么 多 屏幕 的 呢 ? 

S| er i et S1200 T600240\ 
320、480， 这 里 将 其 称 为 “系统 密度 ”。 我 们 发 现 一 个 规律 ， 相 隔 数 值 之 间 是 两 倍 的 关 
系 。 一 般 情 况 下 ，240 x 320 的 屏幕 是 低 密度 120 dpi， 即 lIdpi，320 x 480 的 屏幕 是 中 密 
度 160 dpi， 即 mdpi，480 x 800 的 屏幕 是 高 密度 240 dpi， 即 hdpi，720 x 1280 的 屏幕 
是 超 高 密度 320 dpi， 即 xhdpi，1080 x 1920 的 屏幕 是 超 超 高 密度 480 dpi， 即 xxhdpi， 
vlan | aa 





密度 值 TODO OE VY 2 TI 32 0 IN| 





代表 分 辩 率 
表 5-1 密度 与 分 状 率 

安 音 对 界面 元 素 进 行 缩放 的 比例 依据 是 “系统 密度 ”， 而 不 

& 一 个 重要 的 单位 dp 

dp 也 可 写 为 dip， 即 density-independent pixel。dp 更 类 似 一 个 物理 尺寸 ， 如 一 个 
宽 和 高 均 为 100 dp 的 图 标 在 320 x 480 和 480 x 800 的 手机 上 “看 起 来 ”一 样 大 ， 而 实 
际 上 它们 的 像素 值 并 不 一 样 ， 如 图 5-173 所 示 。dp 正 是 这 样 一 个 尺寸 ， 不 管 这 个 屏幕 的 
密度 是 多 少 ， 屏 幕 上 相同 dp 大 小 的 元 素 看 起 来 始终 竺 不 多 大 。 

另外 ， 文 字 尺 寸 使 用 sp， 即 scale-independent pixel 的 缩写 ， 这 样 当 用 户 在 系统 设 
置 里 调节 字号 大 小 时 应 用 中 的 文字 也 会 随 之 变 大 变 小 。 

CC dp 与 px 的 转换 

在 安 旱 系统 中 ， 系 统 密度 为 160 dpi 的 
中 密度 手机 屏幕 为 基准 屏幕 ， 即 320 x 480 
的 手机 屏幕 。 在 这 个 屏幕 中 ，1 dp=1 px。 

100 dp 在 320x480 ( mdpi，160 dpi) 
中 是 100 pxe 那 么 100 dp 在 480 x 800( hdpi， 
240 dpi ) 的 手机 上 是 多 少 px 呢 ? 我 们 知道 
100 dp 在 两 个 手机 上 看 起 来 差不多 大 ， 根 据 
160 与 240 的 比例 关系 ， 我 们 可 以 知道 ， 在 
480 x 800 中 100 dp 实际 覆盖 了 150 pxo 图 5-173 同一 尺寸 图 标 在 不 同 分 辨 率 手机 上 显示 的 效果 
此 ， 如 果 用 户 为 mdpi 手机 提供 了 一 张 100 px 的 图 片 ， 这 张 图 片 在 hdpi 手机 上 就 会 拉 伸 
至 150 px， 但 是 它们 都 是 100 dp。 

中 密度 和 高 密度 的 缩放 比例 似乎 可 以 不 通过 160 dpi 和 240 dpi 计算 ， 通 过 320 px 和 
480 px 也 可 以 算出 。 但 是 按照 宽度 计算 缩放 比例 不 适用 于 超 高 密度 xhdpi 和 超 超 高 密度 
xxhdpi。 即 720x1280 中 1 dp 是 多 少 px 呢 ? 如 果 用 720/320， 会 得 出 1 dp=2.25 px， 
实际 上 这 样 算出 来 是 不 对 的 。dp 与 px 的 换算 要 以 系统 密度 为 准 ，720 x 1280 的 系统 密度 
为 320，320 x480 的 系统 密度 为 160，320/160=2， 那 么 在 720 x 1280 中 ，1 dp=2 px。 
同 理 ， 在 1080 x 1920 中 ，1 dp=3 px。 


各 加 


320x480 
480x800 
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Idpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12， 我 们 只 要 记 住 这 个 比例 ，dp 与 px 的 换算 就 
十 分 容易 了 ， 如 图 5-174 所 示 

我 们 发 现 ， 相 隔 数 字 之 间 还 是 两 倍 的 关系 ， 在 计算 的 时 候 以 mdpi 为 基准 。 例 如 在 
20%1280N( xmoD em a se 2 xe ma A no BI A 昌 四 1 
1 dp= 2 px。 反 着 计算 更 重要 ， 例 如 使 用 Photoshop 在 720 x 1280 的 画布 中 制作 了 界面 
效果 图 ， 两 个 元 素 的 间距 是 20 px， 那 要 标注 多 少 dp 呢 ? 两 倍 的 关系 ， 那 惑 是 10 dp。 


密度 Idpi mdpi hdpi xhdpi xxhdpi 


分 辨 率 240x320 320x480 480x800 | 720x1280 |1080x1920 


比例 3 二 6 8 La 





D2 





@ 





图 5-174 dp 与 px 的 换算 

当 安 卓 系统 的 字号 设 为 “普通 ”时 ，sp 与 px 的 尺寸 换算 和 dp 与 px 是 一 样 的 。 例 如 
某 文 字 大 小 在 720 x 1280 的 Photoshop 画布 中 是 24 px， 那 么 告诉 工程 师 这 个 文字 大 小 \ 
alllsnu 

加 建议 在 xdhpi 中 作 图 

安 持 手机 有 这 么 多 屏幕 ， 我 们 到 奔 依 据 哪 种 屏幕 作 图 呢 ? 没有 必要 为 不 同 密度 的 手机 
都 提供 一 套 素材 ， 在 大 部 分 情况 下 一 套 就 够 了 。 

现在 手机 比较 高 的 分 辨 率 大 概 是 1080 x 1920， 可 以 选择 这 个 尺寸 作 图 ， 但 是 图 片 
素材 将 会 增 大 应 用 安装 包 的 大 小 ， 并 且 尺 寸 越 大 的 图 片 占 用 的 内 存 越 多 。 如 果 不 是 设计 
ROM， 而 是 做 一 款 应 用 ， 建 议 大 家 用 Photoshop 在 720 x 1280 的 画布 中 作 图 。 这 个 尺寸 
兼顾 了 美观 性 、 经 济 性 和 计算 的 简单 。 美 观 性 是 指 以 这 个 尺寸 做 出 来 的 应 用 在 720 x 1280 
中 显示 完美 ， 在 1080 x 1920 中 看 起 来 也 比较 清晰 ;经济 性 是 指 在 这 个 分 辨 率 下 导出 的 图 
片 尺 寸 适中 ， 内 存 消耗 不 会 过 高 ， 并 且 图 片 文 件 大 小 适中 ， 安 装 包 也 不 会 过 大 。 其 计算 简 
单 ， 就 是 1 dp=2 px。 

对 于 做 出 来 的 图 片 ， 记 着 让 界面 工程 师 放 进 drawable-xhdpi 的 资源 文件 夹 中 。 

(3 屏幕 的 宽 高 差异 

在 720x1280 中 作 图 要 考虑 向 下 兼容 不 同 的 屏幕 。 通 过 计算 我 们 可 以 知道 ， 
320 x 480 和 480 x 800 的 屏幕 宽度 都 是 320 dp， 而 720 x 1280 和 1080 x 1920 的 屏幕 宽 
度 都 是 360 dp。 它 们 之 间 有 40 dp 的 差距 ， 这 40 dp 在 设计 中 的 影响 还 是 很 大 的 。 如 图 
5-175 所 示 ， 蝴 蝶 图 片 距离 屏幕 的 左 、 右 边 距 在 320 dp 宽 的 屏幕 和 360 dp 宽 的 屏幕 中 就 
pr 
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360dp 


5-175 屏幕 的 宽度 差异 





不 仅 宽度 上 有 差异 ， 高 度 上 的 差异 更 加 明显 。 对 于 天 和 气 等 工具 类 应 用 ， 由 于 界面 一 般 
是 独占 式 的 ， 更 要 考虑 屏幕 之 间 的 比例 差异 ， 如 图 5-176 所 示 。 


720x1280 与 1080x1920 
屏幕 宽度 360dp 
屏幕 比例 9:16 


图 5-176 比例 差异 

如 果 想 消 际 这 些 比例 擂 异 ， 可 以 通过 添加 布局 文件 来 实现 。 一 般 情况 下 ， 布 局 文件 放 
在 layout 文件 夹 中 ， 如 果 要 单独 对 360 dp 的 屏幕 进行 调整 ， 可 以 单 做 一 个 布局 文件 放 在 
layout-w360dp 中 ; 如 果 想 对 某 个 特殊 的 分 辨 率 进行 调整 ， 可 以 将 布局 文件 放 在 标 有 分 辩 
率 的 文件 夹 中 ， 例 如 layout-854 x 480。 

(网 几 个 资源 的 文件 夹 

如 果 在 720 x 1280 中 做 了 图 片 ， 要 让 开发 人 员 放 到 drawable-xhdpi 的 资源 文件 夹 中 ， 
这 样 才 可 以 显示 正确 。 这 里 建议 提供 一 套 素 材 就 可 以 了 ， 可 以 测试 一 下 应 用 在 低 痕 手机 上 
运行 是 否 流畅 ， 如 果 比 较 卡 ， 可 以 根据 需要 提供 部 分 mdpi 的 图 片 素材 ， 因 为 xhdpi 中 的 
图 片 运行 在 mdpi 的 手机 上 会 比较 占 内 存 。 

以 应 用 图 标 为 例 ，xhdpi 中 的 图 标 大 小 是 96 px， 如 果 要 单独 给 mdpi 提供 图 标 ， 那 么 
这 个 图 标 大 小 是 48 px， 放 到 drawable-mdpi 的 资源 文件 夹 中 。 各 资源 文件 夹 中 的 图 片 尺 
寸 同样 符 合 ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12 的 规律 ， 如 图 5-177 所 示 。 
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48dp 48dp 48dp 48dp 
A48px 72px 96px 144px 
mdpi hdpi xhdpi xxhdpi 


drawable Hp drawable mdp: drawable hdpi 
艾 件 去 文件 去 文件 去 
drawable-xhdpl i drawable-xxhdpi "drawable-nodpi 
WW wh 国 | 文人 去 U 文件 卖 


图 5-177 符合 规律 
如 果 把 一 个 高 2 px 的 分 割 线 素材 做 成 了 9.png 图 片 ， 想 让 细 线 在 不 同 密度 中 都 
是 2 px， 而 不 被 安 卓 根据 密度 进行 缩放 ， 应 该 怎么 办 ? 这 时 可 以 把 这 个 分 割 线 素材 放 到 
drawable-nodpi 中 ， 这 个 资源 文件 夹 中 的 图 片 将 按照 实际 像素 大 小 进行 显示 ， 而 不 会 被 安 早 
根据 密度 进行 缩放 。 即 在 mdpi 中 细 线 是 2 px ( 2 dp ) ， 在 xhdpi 中 细 线 是 2px (1dp)。 


(CC 丑 吕 APP 动 效 设计 


在 如 今 琳 琅 满 目的 APP 中 如 何 脱颖而出 呢 ? 设计 师 要 考虑 的 不 仅仅 是 产品 如 何 更 合 
理 地 展现 结构 与 功能 ， 更 重要 的 是 思考 自己 的 APP 是 否 能 在 做 到 简便 、 易 懂 的 同时 给 
尸 以 新 帘 感 。 

此 时 ， 有 限 的 屏幕 空间 仅 靠 文字 的 提示 是 不 够 的 ，APP 需要 更 多 的 新 鲜血 液 ， 即 动 效 
设计 。 动 效 设 计 可 以 扩展 空间 内 容 、 简 化 引导 流程 、 降 低 学 习 成 本 ， 更 重要 的 是 给 用 户 市 
来 意 想不到 的 惊喜 ， 它 就 像 人 类 的 胶体 语言 ， 通 过 肢体 语言 传达 更 多 的 抽象 信息 和 性 格 展 
现 。 上 肢体 语 言 又 称 身 体 语言 ， 是 指 通 过 头 、 眼 、 有 贷 、 手 、 肘 、 壁 、 身 、 脐 、 足 等 人 体 部 位 
的 协调 活动 来 传 这 人 物 的 思想 ， 形 象 地 售 以 表情 达意 的 一 种 沟通 方式 。 一 个 人 要 向 外 界 传 
达 完整 的 信息 ， 单 纯 的 语言 成 分 只 占 7/100， 声 调 占 38/100， 另 外 的 55/100 信息 都 需要 
由 非 语言 的 体态 来 传达 。 肢 体 语 言 的 重要 性 可 见 一 斑 。 

肢体 语言 大 致 可 分 为 三 类 动 效 ， 即 基本 动 效 、 招 牌 动 效 和 高 难度 动 效 ， 这 三 种 动 效 是 
如 何在 APP 设计 中 体现 的 呢 ? 

APP 设计 的 三 类 动 效 

@ 基本 动 效 让 用 户 舒 服 


基本 动 效 也 可 称 为 日 前 动 效 ， 如 坐 立 、 行 走 、 握 手 、 拥 抱 等 ， 对 应 APP 中 的 基本 动 
到 | 
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更 辩 gU| photoshop 创意 @ pp 元素 设 计 从 入 门 到 精通 
=) o 





人 @ 指向 性 动 效 ， 如 滑动 、 弹 出 等 。 
人 提示 性 动 效 ， 如 滑动 删除 、 下 拉 刷 新 等 。 


@@ 空间 扩展 : 如 翻动 、 放 大 等 。 





流畅 、 目 然 映 别 、 重 力 模 拟 这 些 动 效 看 似 简 单 却 能 让 用 户 在 操作 时 轻松 自如 并 有 强烈 
的 代入 感 。 这 类 动 将 最 重要 的 是 让 用 户 感到 室 无 负担 、 如 沭 春风， 也 融 是 不 要 和 人 眼球 ， 
情 无 声 县 地 顺应 用 户 行为 ， 引 导 用 户 需 求 。 

这 关 动 效 在 设计 过 程 中 需要 注意 以 下 几 点 。 


《四 系统 兼容 和 资源 占用 。 
@@ 动态 速度 的 节奏 。 


仿生 性 or 现实 重 现 。 





招牌 动 效 加 深 用 户 印 象 


招牌 动 效 是 基于 基本 动作 有 选择 性 的 差异 化 展现 ， 巧 妙 的 设计 在 满足 产品 功能 需求 的 
基础 上 更 能 让 用 户 惊艳 。 这 类 动 效 是 APP 的 专属 符号 ，APP 的 品牌 展现 通过 此 类 动 效 有 
较 大 的 发 挥 空 间 。 同时 这 类 动 效 的 设计 更 具 尝 试 性 和 前 瞻 性 , 它 是 动 效 趋势 的 实践 和 探索 ， 
甚至 能 引发 跟风 潮流 。 

这 类 动 效 设计 需要 注意 以 下 几 点 。 

人 操作 前 的 提示 引导 。 

人 志 张 化 和 个 性 化 的 表现 。 

名 对 动态 趋势 的 预测 。 


高 难度 动 效 让 用 户 惊 喜 


基本 动 将 让 用 户 舒 服 ， 招 牌 动 效 让 用 户 印 象 深 刻 ， 然 而 只 有 这 坚 还 不 够 ， 令 人 惊喜 的 
高 难度 动作 可 以 让 别人 对 你 乔 目 相 看。 这 交 动 效 很 酷 、 很 炫 ， 可 以 让 用 户 做 长 时 间 的 视线 





停留 享受 ， 让 用 户 在 惊叹 的 同时 不 得 不 为 设计 师 点 赞 ， 大 大 提升 了 对 APP 所 属 品 牌 及 开 
发 团队 实力 的 认可 。 
当红 别 她 WIIABmDIENI 开 | 晤 12W 册 | 人 等 待 抢 音 取消 关 <- 等 待 抢 音 


高 难度 动 效 只 是 锦上添花 或 画龙点睛 ， 
所 以 在 APP 设计 中 高 难度 动 效 并 不 一 
定 都 会 使 用 ， 要 根据 APP 的 实际 需要 
进行 设计 ， 在 不 干扰 主 功能 的 前 提 下 进 
行 探索 展示 ， 因 此 这 类 动 效 多 出 现在 引 
导 页 或 者 特殊 功能 展示 上 ， 如 图 5-178 
所 示 。 

对 于 这 类 动 效 需要 注意 的 是 在 满足 
系统 资源 占用 的 前 提 下 尽 可 能 发 挥 。 





图 5-178 动 效 展示 





基本 动 效 、 招 牌 动 效 和 高 难度 动 效 的 合理 运用 可 以 让 APP 变 得 更 出 众 、 更 性 感 、 更 
有 趣 。 在 APP 设计 过 程 中 ， 这 三 类 动 效 要 遵循 “以 基本 动 效 为 主 ， 招 牌 动 效 为 辅 ， 高 难 
度 动 效 精 选 使 用 ， 切 勿 过 度 炫 技 ” 的 准则 。 在 全 民 局 平 化 的 设计 趋势 中 ， 相 信 动 效 会 为 设 
计 帝 来 更 多 的 可 能 和 惊喜 。 

赋予 动 效 生命 力 

一 段 动 效 首先 需要 是 生动 且 有 趣 的 ， 不 仪 要 有 好 看 的 外 观 还 要 有 流畅 的 体验 。 如 果 要 
做 到 这 一 点 ， 需 要 赋予 动 效 以 生命 力 ， 具 体 有 以 下 几 种 方法 。 

@ 模拟 惯性 

现实 中 物体 的 运动 是 有 惯性 的 ， 例 如 公交 车 突然 刹车 时 乘客 会 突然 往 前 一 倒 。 仔 细 观 
察 不 同 的 动 效 ， 会 发 现 图 像 在 变化 ( 放大 、 纺 小 和 翻转 ) 的 末端 都 会 “超出 ”一 点 再 立即 
“反弹 ”回来 ， 如 此 处 理 使 得 整个 动 效 充满 活力 ， 显 得 生动 、 有 趣 。 

模拟 重力 

与 惯性 一 样 ， 重 力也 是 现实 中 存在 的 现象 ， 所 有 物体 在 无 回 上 的 支持 力 的 情况 下 都 会 
下 坠 ， 例 如 倾倒 垃圾 。 一 般 APP 删除 卡片 的 动 效 就 是 横向 滑动 直至 消失 ,但 是 有 些 动 效 
却 加 入 了 重力 效应 。 如 卡片 在 横向 滑动 的 同时 也 在 翻转 并 下 险 ， 就 像 现实 中 往 垃圾 桶 中 倾 
倒 垃 圾 一 样 。 这 在 使 得 整个 动 效 生动 、 有 趣 的 同时 也 便于 用 户 理解 操作 的 含义 。 

@ 均匀 变速 

一 个 优秀 的 动 效 肯定 不 会 是 匀速 运动 的 ， 义 速 运动 的 物体 显得 生硬 和 死板 ， 就 像 机 器 
人 一 样 。 要 想 让 一 个 图 像 运 动 的 有 活力 ， 就 需要 对 其 运动 速度 进行 设计 。 界 面 中 不 同 元 素 
的 运动 速度 不 尽 相 同 , 但 其 运动 均 遵循 一 定 的 原则 , 其 中 之 一 就 是 均匀 变速 , 切忌 “和 急 起 ”。 
也 就 是 说 界面 元 素 在 运动 时 的 初始 速度 要 为 0， 以 匀 加 速 开 始 运动 ， 而 在 运动 结束 阶段 往 
往 是 可 以 急 停 的 。 

@ 碎片 化 运动 

使 一 款 应 用 变 得 个 性 十 足 的 一 个 好 方法 就 是 给 它 加 上 炫 酷 的 动 效 ， 而 使 一 个 动 效 炫 酷 
的 常用 方法 就 是 碎片 化 运动 。 简 单 地 说 就 是 把 界面 中 的 图 像 拆 解 成 一 个 个 碎片 ， 然 后 让 它 
们 进行 不 同步 的 运动 ， 利 用 时 间 旧 隔 和 变速 产生 炫 酷 的 效果 。 

站 提升 APP 动 效 的 内 在 美 

真正 优秀 的 动 效 不 是 只 有 漂亮 外 表 的 “花瓶 '， 还 得 具备 优化 交互 和 提升 体验 的 作用 。 
:4 a 

GD 引导 


图 形 界面 本 是 难 懂 且 抽象 的 , 增强 引导 是 降低 软件 操作 难度 和 提升 用 户 体验 的 好 方法 。 

中 动态 聚焦 

通过 动态 化 的 处 理 引 导 用 户 聚 焦 界 面 的 关键 部 位 ， 以 使 体验 更 加 流畅 。 青 蛙 能 够 快速 
捕捉 移动 中 的 物体 ， 人 眼 也 具有 相似 特征 ， 运 动 中 的 物体 总 能 引起 人 们 下 意识 的 关注 。 
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示意 过 小 


过 渡 动 效 就 是 给 界面 的 变化 加 上 流畅 的 过 渡 ， 目 的 是 引导 用 户 了 解 到 底 发 生 了 什么 ， 
而 不 会 使 其 不 知 所 措 。 如 添加 卡片 的 过 程 进 行 了 生动 的 模拟 ， 让 用 户 能 够 很 轻易 地 了 解 
发 生 了 什么 。 试 想 一 下 ， 如 果 该 页 面 没 有 滑动 效果 ， 而 是 直接 生硬 的 跳 转 ， 是 不 是 差劲 
很 多 ? 

@ 空间 转 场 


转 场 动 效 是 被 设计 师 普 遍 重 视 的 一 种 特效 ， 它 的 作用 也 是 引导 用 户 ， 让 用 户 更 好 地 理 
解 页 面 跳 转 ， 知 道 自 己 身 在 何方 。 例 如 一 个 漂亮 的 转 场 动 效 ， 为 了 避免 两 个 页 面 之 间 的 跳 
转 过 于 生硬 ， 利 用 动 效 填补 上 了 页 面 跳 转 的 中 间 过 程 ， 使 得 体验 更 加 流畅 和 自然 。 

@ 简化 

有 时 优秀 的 设计 就 是 出 色 的 简化 ， 简 化 界面 信息 和 交互 层级 可 以 降低 操作 难度 与 提升 
用 户 体验 。 

隐藏 二 级 操作 项 

利用 动 效 可 以 使 界面 中 的 部 分 信息 隐藏 ， 在 进行 某 些 操作 后 隐藏 的 内 容 会 动态 展开 ， 
从 而 达到 简化 初始 界面 的 目的 ， 使 界面 简洁 、 大 气 。 

按钮 动 效 化 

使 按钮 动 效 化 能 够 让 界面 中 的 重要 信息 动态 地 浮现 在 同一 按钮 上 ， 使 得 用 户 的 目光 紧 
紧 果 着 按钮 ， 弱 化 了 页 面 跳 转 融 来 的 干扰 ， 使 体验 更 加 流畅 。 

8 增强 反馈 

软件 的 反馈 对 于 用 户 体验 的 提高 来 讲 至 关 重要 ， 增 强 反 馈 可 以 起 到 更 好 的 提示 作用 ， 
使 体验 过 程 更 加 轻松 和 恰 悦 。 拌 动 是 增强 反馈 的 方法 之 一 ， 用 动 效 反馈 代 花 图形 文 字 的 静 
态 提示 更 加 自然 和 引 人 和 人 注目。 例如 一 个 动 效 出 自 人 苹果 的 Pages 软件 ， 在 进入 编辑 状态 后 
竺 编辑 对 象 进 入 不 断 的 抖动 状态 起 到 很 好 的 引导 作用 。 

动 效 化 显然 已 成 为 移动 互联 网 产品 的 新 趋势 ， 如 何 设计 出 有 趣 且 吸引 人 的 动 效 已 成 
为 设计 师 们 的 新 课题 。 不 同 的 产品 适合 不 同类 型 的 动 效 ， 有 些 产品 适合 炫 酷 的 动 效 ， 有 
些 则 不 适合 。 切 记 不 要 把 动 效 设计 成 华而不实 的 花架 子 ， 而 应 该 将 其 视 为 提升 用 户 体验 
的 新 方法 。 

(6 动 效 设 计 何 时 动 

等 待 的 时 间 : 面 对 缓 冲 、 加 载 等 ， 用 户 会 缺少 耐心 ， 而 充满 个 性 、 有 趣 的 动 效 
可 以 让 用 户 被 设计 所 吸引 。 

如 果 希 望 用 户 点 击 这 个 地 方 ， 可 以 在 此 处 设计 一 个 动 效 。 

如 果 和 希望 用 户 点 击 的 效果 不 一 样 ， 也 可 以 给 它 一 个 动 效 。 

[C 岂 常见 的 动 效 设 计 方 法 

下 面 是 一 些 音 见 的 动 效 设计 方法 ， 在 合适 的 条 件 下 自然 要 考虑 从 这 些 方 法 入 手 ， 为 我 
们 的 设计 增加 一 些 动 感 。 
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@ 将 元 未 蔡 换 为 个 性 化 内 容 : 传统 的 等 待 或 加 载 动画 人 们 已 经 熟悉 ， 要 想 让 人 眼 
前 一 亮 ， 改 头 换 面 是 必须 的 。 如 谷歌 用 了 自己 的 颜色 ，“ 去 哪儿 ”用 了 自己 的 
Logo 等 ， 这 些 都 可 以 在 体现 个 性 化 动 效 的 同时 凸显 产 品 品牌 ， 不 失 为 一 个 很 
好 的 选择 。 

@@ 更换 产品 的 运动 方式 : 除了 旋转 运动 之 外 ,我 们 还 可 以 运用 重复 、 构 建 、 变 形 、 


拟 物 和 人 的 动作 ( 翻 书 ) 等 ， 只 要 是 和 产品 定位 相符 的 元 素 ， 我 们 都 能 给 它 创 
意 一 个 独特 的 运动 方式 。 

@ 赋予 组 件 明显 的 交互 反馈 : 冷冰冰 的 点 击 和 出 现 往往 不 能 吸引 用 户 的 注意 力 ， 
所 以 当 我 们 需要 加 强 某 些 元 素来 引导 用 户 的 时 候 可 以 给 这 些 元 素 加 上 适当 的 出 
现 效果 ， 如 渐 隐 / 渐 显 、 人 位移、 放大 /缩小 、 光 晕 、 分 布 等 效果 ， 这 样 会 起 到 
很 好 的 引导 效果 。 





动 效 设计 的 精妙 之 处 在 于 瞬间 使 人 们 获得 的 体验 ， 通 过 瞬间 的 可 见 变 化 丰富 了 人 们 在 
使 用 APP 时 的 感 况 , 从 而 不 再 陌生 、 不 再 冰冷 、 不 再 无 趣 等 。 动 效 设 计 在 赋予 元 素 动 的 同时 ， 
我 认为 还 要 符合 人 们 的 认 知 ， 并 不 是 所 有 的 动 都 能 让 人 愉悦 ， 既 要 满足 产品 的 需求 ， 还 要 
匹配 人 们 当时 的 场景 开 求 。 
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| 因为 手持 设备 屏幕 较 小 ， 如 何在 有 限 的 页 面 内 呈现 或 引导 有 效 
“Wy 多 | 信息 又 不 显得 杂乱 肥 肿 考验 了 设计 师 的 能 力 。 


ED APP 分 类 


目前 ， 各 种 APP 应 用 层出不穷 , APP 应 用 被 大 致 分 为 系统 工具 、 影 音 娱乐 、 网 页 浏览 、 
办 公 阅 读 、 储 交通 信 、 生 活 百 科 、 购 物 缴费 等 。 每 个 大 类 下 又 包含 众多 小 类 别 ， 其 中 一 些 
应 用 软件 功能 类 似 ， 但 在 设计 与 使 用 上 有 所 差异 ， 我 们 能 根据 喜好 挑选 适合 自己 的 APP 
软件 。 

合理 地 定义 产品 非常 重要 ， 首 先 需要 确定 产品 大 致 是 属于 哪 种 类 型 的 APP。 

《网 APP 的 分 类 

目前 市 面 上 的 APP 大 致 分 为 三 类 ( 分 类 方式 很 多 ， 此 处 的 分 类 方式 仅 供 人 参考 )。 














@ 实用 工具 型 : 例如 天 气 预 报 、 录 音 、 计 算 器 、 股 票 查询 等 应 用 。 
加 生产 族 京 型 ， 这 类 应 用 主要 用 于 解决 用 户 在 极 短 的 时 间 并 且 不 稳定 的 情况 下 (如 








在 户外 进行 文字 记录 ) 高 效 地 完成 工作 任务 ， 例 如 印象 笔记 。 
加 从 有 型 : 这 类 应 用 多 数 为 游戏 类 ， 它 能 让 用 户 长 时 间 地 沉浸 在 应 用 上 。 








加 定义 APP 类 型 

比如 需要 做 一 款 APP 应 用 “旅游 笔记 ”， 它 能 帮助 用 户 随 时 随地 记录 旅行 中 的 感想 ， 
并 且 实 现 不 同 平台 之 间 的 同步 。 那 么 如 何 定 义 它 的 类 型 呢 ? 

@ 列举 所 有 用 户 喜 欢 的 功能 点 

尽量 罗列 自己 所 能 想到 的 任务 与 创意 ， 罗 列 后 再 进行 精简 提炼 。 以 “旅游 笔记 ”为 例 ， 
宫 户 感 兴 趣 的 任务 可 能 是 记录 行程 、 订 购 机 票 、 检 查 随 身 物品 、 随 心 拍摄 + 分 享 、 查 找 攻略 、 
显示 经 历 的 足迹 、 标 注 所 在 地 理 位置 、 记 录 美 食 等 。 

@) 确定 目标 用 户 

这 款 APP 的 目标 用 户 除 了 在 使 用 移动 设备 ， 期 待 精致 的 图 片 、 简 洁 的 交互 方式 、 出 
色 的 表现 以 外 ， 他 们 还 具备 什么 样 的 特征 呢 ? 以 “旅游 笔记 ”为 例 ， 可 以 判断 下 列 描 述 是 
否 适 合 你 的 用 户 。 








奎 欢 旅游 、 热 爱 购物 、 圣 受 生 活 感 动 、 善 于 分 至 。 
2 T 月 





硕 望 有 经 历 与 人 生 痕 迹 、 与 攻略 、 背 包 客 、 驴 友 。 
旅行 为 3 一 5 天 的 度假 、 时 间 在 15 天 以 上 的 旅行 。 


考虑 完 这 些 问题 ， 挑 选 三 条 最 符合 目标 用 户 的 特征 ， 例 如 喜欢 分 享 与 写 感想 ， 查 找 路 
线 与 攻略 ， 方 便 订 票 ( 机票 、 车 票 与 门票 )。 
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@ 通过 对 目标 用 户 的 定义 来 筛选 功能 点 


在 确定 了 目标 用 户 的 特征 后 就 能 往 选 出 功能 点 。 我 们 在 第 一 步 ， 为 旅行 程序 列 出 大 量 
潜在 的 功能 点 ， 虽 然 这 些 功 能 点 都 很 有 用 ， 但 并 不 意味 着 每 个 功能 点 对 用 户 同 样 有 用 。 第 
Re MN) elt ne ne lt a 二 卜 草 

从 目标 客户 的 观点 出 发 ， 再 来 检视 功能 点 清单 ， 最 后 能 将 程序 聚焦 在 三 个 功能 点 上 ， 
即 拍 照 分 享 写 记录 、 订 各 种 行程 票 、 获 取 位 置 玛 找 攻略 。 

最 后 ， 可 以 定义 程序 ， 精 确 地 概括 程序 的 功能 以 及 目标 用 户 。 这 个 APP 得 到 这 样 的 
定义 : 一 个 解决 旅途 攻略 ， 记 录 点 滴 并 线 上 购 票 的 工具 。 

@ 为 设备 而 设计 

我 们 知道 不 同 的 设备 有 不 同 的 系统 , 不同 的 系统 有 不 同 的 原生 交互 与 UI 控件， 良好 、 
合理 地 利用 这 些 控 件 能 高 度 地 市 约 开发 成 本 ， 并 且 达 到 用 户 体 验 的 一 致 ， 例 如 iPhone 的 
APP 的 操作 习惯 就 应 该 按照 iPhone 自身 原 有 的 惯性 。 

(大刀 APP 界面 设计 的 原则 

下 面 介绍 APP 界面 设计 的 原则 。 

《 朋 依据 手机 的 物理 特性 设计 界面 的 原则 
应 尽量 减少 文字 的 输入 。 由 于 手机 在 输入 上 的 低 效 性 ， 在 设计 过 程 中 应 尽量 减 
少 用 户 的 输入 ， 如 果 有 可 能 可 以 设置 默认 值 ， 或 者 让 用 户 选 择 目 标 值 。 
言 恩 结 构 好 ， 屏 与 屏 之 间 的 逻辑 关系 清晰 。 由 于 手机 屏幕 相对 较 小 ， 只 能 展示 
较 少 的 信息 量 ， 这 时 在 APP 界面 设计 中 就 需要 有 清晰 的 信息 架构 ， 让 用 户 能 一 
目 了 然 地 知道 APP 的 各 个 模块 并 能 够 目 由 切换 。 
移动 APP 的 重要 功能 可 以 在 界面 中 适当 提示 ， 将 重要 、 高 频 使 用 的 功能 或 信息 
放 在 首页 或 其 他 显眼 的 位 置 。 




















加 依据 手机 的 移动 特性 设计 界面 的 原则 

© 主要 功能 可 以 用 单 手 操作 完成 。 在 APP 开发 过 程 中 需要 考虑 最 重要 的 核心 功能 
是 否 能 单 手 操作 完成 。 常 见 手势 翻 页 交互 效果 等 。 

@ 界面 必须 简洁 、 操 作 简 单 ， 步 又 少 。 层 次 不 要 太 深 ， 一 般 不 超过 三 层 。 

忆 








可 利用 多 种 提示 方式 ， 如 声音 、 振 动 捉 醒 ， 以 吸引 用 户 的 视线 。 例 如 快速 体验 
移动 触摸 啊 应 操作 等 。 





ID 界面 的 构图 

设计 和 绘画 一 样 ， 对 需求 和 内 容 进行 分 析 ， 采 用 适当 的 构图 可 以 化 繁 为 人 镜 ， 提 高 设计 
效率 。 构 图 的 核心 重点 在 于 弄 清楚 产品 的 功能 核心 和 卖点 ， 把 它们 凸显 出 来 ， 最 终 让 用 户 
获得 更 加 舒服 的 体验 。 而 杂乱 无 章 的 堆积 会 显得 非常 糟糕 ， 甚 至 有 时 候 用 户 会 因为 找 不 到 
自己 想 要 的 东西 而 马上 离开 ， 并 留 下 非常 不 好 的 印象 。 通 过 前 期 构图 可 以 节省 时 间 ， 让 设 
计 更 有 条 理 。 
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《网 什么 是 构图 

构图 就 是 在 有 限 的 画面 中 将 各 种 元 素 进 行 合理 的 布局 和 安排 ， 使 图 形 和 文字 在 画面 中 
达到 最 佳 位 置 ， 产 生 最 优 视 觉 效果 。 

构图 是 整个 画面 的 "骨架 " ,决定 了 视觉 草 销 界面 是 否 能 准确 地 表达 主题 ,吸引 用 户 注意 。 

四 常见 的 构图 方法 

下 面 介 绍 几 种 界面 中 常用 的 构图 方法 。 

@ 九宫 格 构 图 

人 们 最 常见 的 九宫 格 构图 是 手机 的 解 锐 界面 ， 如 图 6-1 所 示 。 这 种 构图 主要 运用 在 
以 分 类 为 主 的 一 级 页 面 ， 起 到 功能 分 类 的 作用 。 





图 6-1 九宫 格 构图 
通常 在 界面 设计 中 我 们 会 利用 网 格 进 行 布局 ， 根 据 水 平方 向 和 王 直 方向 划分 构成 的 畏 
助 线 ， 设 计 会 进行 得 非常 顺利 。 在 界面 设计 中 ， 九 品格 这 种 类 型 的 构图 更 加 规 沁 和 营 用 ， 
用 户 在 使 用 过 程 中 非常 方便 ， 应 用 功能 会 显得 格外 明确 和 突出 ， 如 图 6-2 所 示 。 


半 员 加 注 凌 前 个 筑 写 


i FT ee eeeee 中 国联 通 去 1:30 @ 1 98%ED 
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图 6-2 九宫 格 界面 设计 
九 品 格 给 用 户 一 目 了 然 的 感 完 ， 操 作 便捷 是 这 种 构图 方式 最 重要 的 优势 ， 灵 活 地 运用 
九宫 格 辅 助 线 区 分 出 来 的 方块 能 够 在 有 规律 的 设计 方法 中 寻找 突破 。 
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在 分 配 9 个 方块 的 时 候 不 一 定 一 个 内 容 对 应 一 个 格子 ， 也 可 以 一 对 二 、 一 对 多 ， 打 破 
平均 分 庆 的 习惯 。 增 加 留 白 ， 调 整 页 面 节奏 或 者 突出 功能 上 或 广告 。 各 方志 的 组 成 方 
式 不 同 ， 页 面 的 效果 也 会 产生 无 数 的 变化 ， 如 图 6-3 所 示 。 





iColorDay 
Q 有 好 阐 片 ， 没 有 好 阅 片 的 准 





图 6-3 变化 的 九宫 格 
可 以 看 出 ， 这 样 的 版 式 可 以 使 界面 变 得 非常 灵活 ， 内 容 简 单 、 信 息 明 了 。 
@ 圆心 点 放射 性 构图 


圆 是 有 圆心 的 ， 在 界面 中 往往 通过 构造 一 个 大 圆 来 起 到 聚焦 、 凸 显 作用 。 

放射 性 构图 有 凸显 位 于 中 间 的 内 容 或 功能 点 的 作用 。 在 强调 核心 功能 点 的 时 候 可 以 试 
着 将 功能 以 圆 形 排列 到 界面 中 间 ， 以 当前 主要 功能 点 为 中 心 ， 将 其 他 按钮 或 内 容 呈 放射 状 
排列 起 来 。 

将 主要 功能 设置 在 版 陈 的 中 间 位 置 能 引导 用 户 的 视线 聚集 在 想 要 突出 的 功能 点 上 ， 即 
使 视线 本 来 不 在 中 间 位 置 ， 也 能 引导 用 户 再 次 回 到 中 心 的 聚集 处 ， 如 图 6-4 所 示 。 





图 6-4 圆心 点 放射 性 构图 
在 界面 设计 中 ， 圆 形 的 运用 能 使 界面 显得 格外 生动 ， 在 多 数 可 操作 的 按钮 上 或 交互 动 
画 中 都 能 见 到 圆 形 的 身影 。 
由 于 圆 形 具有 灵动 、 活 路 、 有 趣 、 可 爱 、 多 变 的 特点 ， 在 界面 设计 中 常常 将 圆 形 设计 
与 动画 结合 ， 从 而 让 整个 软件 鲜 活 起 来 。 界 面 中 的 圆 形 能 集中 用 户 的 视线 ， 引 导 用 户 进 行 点 
击 操 作 ， 突 出 主要 的 功能 点 或 数据 ， 把 产品 核心 展现 出 来 ， 如 图 6-5 所 示 。 





SYSTEM ONLINE 


~ 





图 6-5 界面 中 的 圆 形 
圆心 点 放射 形 设计 会 使 软件 显得 更 加 智能 化 ， 包 容 万 象 。 
如 果 要 体现 的 功能 点 非常 简单 ， 只 有 几 个 功能 按钮 ， 可 以 尝试 大 圆 的 展示 设计 ， 突 出 
最 重要 的 功能 ， 然 后 罗列 并 排出 其 他 功能 点 。 这 种 方式 非常 实用 ， 就 和 了 画 重点 一 样 ， 圈 出 
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6-6 大 圆 的 展示 设计 








@) 三 角形 构图 
这 类 构图 方式 主 : 
式 的 三 角形 构图 能 把 1 
在 界面 中 三 角形 ; 


加 甸 笑 -、 稳定。 从 上 至 下 





8" 来 更 为 舒服 , 有 重点 ， 


人 ~ 
Browse Top Destinations 





图 6-7 三 角形 构图 

个 人 信息 页 常用 三 角形 构图 。 头 
像 明确 了 这 个 页 面 的 内 容 ， 而 下 面 的 
粉丝 、 喜 欢 等 数据 就 是 对 本 人 的 一 个 

苗 述 和 介绍 ， 如 图 6-8 所 示 。 

如 图 6-9 所 示 ， 儿 童 卫 士 宝 由 
信息 设置 页 面 运用 了 三 角形 构图 与 圆 有 描述 。 如 图 6-7 所 示 ， 登 录 页 在 设计 中 将 Logo 
形 构 图 的 结合 ， 将 体重 刻度 做 成 可 滑 作为 了 图 形 的 部 分 ， 输 入 框 就 是 产品 的 核心 描述 
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6-8 三 角形 构图 
视线 在 界面 中 的 构图 法 则 

在 设计 实践 中 ， 如 何 引 导读 者 视线 对 增强 用 户 体验 有 重要 作用 。 好 的 构图 视线 法 则 能 
够 让 用 户 获 得 非常 舒服 的 阅读 体验 ， 而 杂乱 无 章 的 构图 往往 让 用 户 厌倦 。 

在 进行 界面 设计 的 时 候 ， 对 用 户 的 视觉 移动 方向 的 预 设 是 非常 重要 的 。 在 界面 中 加 入 
更 为 顺畅 的 构图 设计 引导 用 户 视线 移动 的 元 素 就 能 使 用 户 更 多 地 观察 到 产品 的 核心 和 产品 
的 卖点 。 

视线 流动 的 轨迹 多 是 从 上 至 下 、 从 左 到 右 移动 ， 如 果 不 能 围绕 这 样 的 视线 轨迹 进行 排 
版 ， 用 户 在 阅读 的 时 候 会 显得 很 吃力 ， 找 不 到 重点 ， 从 而 产生 反感 ， 所 以 在 界面 设计 中 需 
要 格外 注意 这 个 地 方 。 现 在 的 界面 一 般 是 上 下 滑动 的 ， 做 好 视 丝 zi 时 立信 大 二 天 小 用 所 的 
负担 狐 注 图 严 度 措 秆 皆 广 旭 移 图 是 S 形 视线 构图 ， 如 图 


6-10 所 示 。 


那么 在 界面 中 怎么 运用 S 形 视线 构图 呢 ? 对 于 S 形 ea 
视线 大 家 都 懂 , 关键 是 如 何 运用 S 形 视线 来 抓 住 用 户 眼球 。 





首先 看 一 下 视线 的 轨迹 ， 在 视线 转角 处 视线 轨迹 最 
为 密集 ， 浏 览 更 为 集中 在 切换 的 地 方 ， 视 线 转折 的 地 方 
停留 时 间 最 长 ， 如 图 6-11 所 示 。 所 以 应 该 把 重要 的 、 


想 要 突出 的 产品 或 功能 放 在 此 处 ， 这 样 更 容易 让 用 户 记 图 6-10 S 形 视线 构图 


此 外 ， 为 了 帮助 视线 移动 方向， 图 片 的 处 理 也 非 
第 讲 究 。 在 如 图 6-12 所 示 的 介绍 中 ， 第 一 张 图 片 展开 
的 效 末 用 到 了 三 角形 构图 ， 第 一 屏 手 机 的 展开 方向 与 
视线 保持 一 致 ， 强 化 了 引导 视线 轨迹 的 指示 性 。 同 时 
多 张 图 片 们 助手 机 排列 方向 引导 到 视线 轨迹 ， 很 好 地 


实现 了 图 片 一 文字 一 图 片 之 间 的 切换 ， 将 用 户 带 入 到 


整个 产品 画面 中 。 图 6-11 视线 转折 处 
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图 6-12 构图 

为 了 使 用 户 的 阅读 更 有 推进 性 ， 在 图 片 层次 和 空间 上 也 需要 注重 用 户 的 视线 效果 ， 将 
焦点 调整 到 合理 的 视线 位 置 上 ， 产 品 正面 方向 对 准 视线 的 来 源 点 。 通 过 这 些 调整 不 仅 能 使 
阅读 顺畅 ， 更 加 强 了 界面 的 平衡 性 。 

与 左右 构图 相 比 ，S 形 构图 在 上 下 滚动 页 
面 上 优势 非常 明显 。 左 右 构图 很 容易 给 人 疲劳 
感 ， 而 S 形 构图 将 图 片 和 文字 完美 地 结合 在 一 
起 ， 配 以 大 量 的 留 白 ， 如 同 山 间 的 溪流 ， 给 
轻快 、 流 畅 的 感觉 ， 如 图 6-13 所 示 。 全 

在 如 图 6-14 所 示 的 界面 中 ， 设 计 师 很 好 sana 
地 运用 了 S 形 视线 构图 ， 增 强 了 穿插 感 和 灵动 
性 。 人 物 的 信息 上 下 穿插 布局 ， 头 像 则 成 为 视 
线 的 转折 点 , 使 这 种 双 列 模式 的 排版 更 有 节奏 。 

具体 到 每 一 部 分 ， 头 像 与 内 容 采 用 了 三 角形 构 
图 ， 内 容 描述 段落 用 到 了 文本 居中 式 ， 画 面 显 
得 稳定 、 和 谐 。 


8 预 话 重大 的 全 新 功能 ， 帮 购 你 充分 发 握 iPod touch 
的 无 句 靖 彩 。 矛 在 ， 你 可 以 在 文 二 信息 中 加 入 再 外 和 视频 ， 
代 带 对 4 照片 进行 精彩 多 猛 ， 了 迁 应 追 躁 自己 i 而 全 
的 文本 输入 据 到 功 蓄 也 让 文字 输入 朗 得 格 不 仅 如 

此 ， 开发 者 们 还 司 以 于 加 至 入 地 运用 更 条 工具 开 发 比 以 往 更 





耶 光 加 泗 并 商 让 有 网 





图 6-13 构图 





导 册 | 吓人 的 哩 全 用 到 个 | 形 构图 几 罗 商人 
插 布 局 ， 这 样 的 构图 层次 感 分 明 ， 动 感 十 足 ， 
如 图 6-15 所 示 。 





图 6-14 S 形 构图 图 6-15 引导 页 
由 图 文 版 式 布局 还 可 以 演变 出 F 字形 构图 ， 这 种 类 型 的 构图 大 部 分 运用 在 图 文 左右 搭 
配 图 和 Banner 中 ， 如 图 6-16 所 示 。 使 用 F 形 构图 能 使 图 文 搭 配 更 有 张力 、 更 大 气 ， 使 
产品 信息 更 为 简单 、 明 确 。 
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”看 镭 呈 一 一 一 一 一 一 一 


EC 





有 史 以 来 
极其 重大 的 
iOS 版 本 


意义 重大 的 改变 ， 人 e6 上 ， 
了 不 起 的 先进 移动 操作 系统 也 同样 实现 了 巨 


大 飞跃 。iO5 8 满载 全 新 功能 ， 和 
想像 的 美好 变 为 现实 ， 如 使 用 > ri 控制 你 家 
中 的 设备 ; 利用 健康 和 健身 3 pp 与 你 的 医生 

展开 交流 。 不 仅 如 此 ， 开发 帮 也 搜 有 了 更 

入 的 资源 和 更 多 工具 ， 能 将 iD5 8 中 一 些 妙 

不 可 言 的 全 新 忆 能 融入 到 他 们 的 3 Pp 之 中 。 

这 一 切 ， 将 在 | edna HD 高 靖 是 
示 屏 上 更 大 有 可 





图 6-16 图 文 左右 搭配 图 
在 F 形 构图 中 ， 主 图 为 F 的 主干 ， 右 侧 两 行 ( 或 两 部 分 ) 文字 为 辅 ， 要 注意 合理 分 配 
图 片 和 文字 的 占 比 ， 如 图 6-17 所 示 。 









中 的 设备 ; 用 如 水 用 信 基 3 pp 与 你 的 医生 


展开 交流 。 不 仅 如 此 ， 开发 者 也 拥有 了 更 深 
入 的 资源 和 更 多 工具 ， 能 将 iO5 8 中 一 些 妙 
不 可 言 新 功能 融入 到 他 们 的 app 之 中 。 
文 一 在 为 出 色 的 F etir aHC 高 清 显 


图 6_17 F 形 构图 
F 形 构 图 用 在 Banner 中 能 使 标题 更 为 突出 、 主 题 更 加 吸引 视线 ， 如 图 6-18 所 示 。 


好 人 们 的 | 
遍 疫 寺 记 ! 


鼎 折 哪 家 强 ? 


今天 长 这 杆 - 





图 6-18 Banner 中 的 F 形 构图 

[i iol Fr pr ol 可 将 文字 放置 
在 与 其 眼神 、 绷 向 、 手 到 ， 则 可 以 通过 产品 
WO a tal 如 图 6-19 
所 示 。 





238 





国 构图 原则 
对 用 户 行为 的 迎合 和 引导 有 一 些 既 有 原则 和 方法 ， 基 本 原则 如 下 。 


忆 
忆 
忆 
忆 
@ 
@ 
己 
忆 
忆 
己 
忆 
@ 
忆 
@ 
忆 
ND 
己 
忆 









= 下 


人 | 到 全 三 封 c| 70% 豆 el 利 名 大 车 借 7 





TU 
A 人 ET 


图 6-19 指向 性 


公司 / 组 织 的 图 标 《Logo) 在 所 有 页 面 中 都 处 于 同一 位 置 。 
用 户 所 需 的 所 有 数据 内 容 均 按 先后 次 序 合理 显示 。 

所 有 的 重要 选项 都 要 在 主页 显示 。 时 
重要 条 目 要 始终 显示 。 

重要 条 目 要 显示 在 页 面 的 项 问 中 间 位 置 。 

必要 的 信息 要 一 直 显 示 。 

消息 、 提 示 、 通 知 等 信息 均 出 现在 屏幕 上 容易 看 到 的 地 方 。 

确保 主页 看 起 来 像 主页 〈 使 主页 有 别 于 其 他 二 、 三 级 页 面 ) 。 

主页 的 长 度 不 宜 过 长 。 

APP 的 导航 尽量 采用 底部 导航 的 方式 。 亲 单数 目 以 4 ~~ 5 个 最 佳 。 

每 个 APP 页 面 长 度 要 适当 。 

在 长 网 页 上 使 用 可 点 击 的 “内 容 列表 ”。 

专门 的 导航 页 面 要 短小 〈 避 免 滚屏 ， 以 便 用 户 一 眼 能 浏览 到 所 有 的 导航 信息 ， 

有 全 局 观 ) 。 

优先 使 用 分 页 (而 非 深 屏 ) 

深 屏 不 宜 太 多 (最 长 4 个 整 屏 ) 。 

当 雷 要 仔细 阅读 理解 文字 时 应 使 用 深 屏 (而 非 分 页 〉。 

为 框架 提供 标题 。 

注意 主页 中 面板 块 的 宽度 。 
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人 @ 将 一 级 导航 放置 在 左 侧面 板 。 

〇 ”避免 水 平 深 屏 。 

@ 文本 区 域 的 周围 是 否 有 足够 的 间隔 。 

”名 条 目 是 否 合理 分 类 于 各 逻辑 区 ， 并 运用 标题 将 各 区 域 进行 清晰 的 划分 











这 些 APP 界面 布局 原则 可 以 保证 页 面 在 布局 方面 的 最 基本 的 可 用 性 ， 非 党 适合 APP 
设计 新 手 来 掌握 。 
侠 构图 的 四 项 基本 法 则 
四 项 法 则 分 别 为 均衡 、 对 比 、 律 动 、 视 点 。 
名 均衡 
_ 各 元 素 在 布局 上 保持 视 沉重 量 的 平衡 和 匀称 ， 从 而 使 视觉 界面 具有 平衡 感 和 冤 定性 。 
感 和 稳定 性 很 强 ， 适 合 于 表现 但 局 限 性 较 大、 缺乏 变化 ， 


NLZ 741 











Wn 6-20 所 示 。 


小 蔓 蜀 委 
[资讯 ] 海岛 奇兵 更 新 预告 : 坦克 新 模 
型 博士 岛 难度 增加 


乱 54 
实 茶 嫩 


[攻略 ] 海岛 奇兵 boom beach25 级 
boss 属 丝 兵 无 伤 打 法 攻略 


我 的 社区 





图 6-20 均衡 


对 比 


人 在 视 客 界 面 中 通过 大 小 对 比 、 字 体 大 小 、 粗 细 对 比 、 疏 密 对 比 、 曲 直 对 比 等 形式 来 突 
出 和 强化 主题 ， 引 起 用 户 关 注 ， 如 图 6-21 所 示 。 





图 6-21 对 比 








<@ 律动 
律动 可 以 理解 为 有 节奏 、 规 律 、 路 跃 、 动 感 等 元 素 ， 起 引导 用 户 的 视 吕 轨迹 的 作用 。 
研究 表明 ， 男 面 右上 角 最 能 吸引 人 的 关注 ， 而 左下 角 对 人 的 吸引 力 最 小 。 律 动能 给 人 视 完 
上 富有 规律 的 节奏 效果 ， 进 而 吸引 用 户 了 解 APP 界面 内 容 ， 如 图 6-22 所 示 。 





图 6-22 律动 
@ 视点 
视点 即 视 名 的 中 心 点 或 者 是 视 名 焦点， 也 是 视 咒 传达 要 素 的 核心 点 。 构 图 的 视 况 中心 


一 定 是 界面 最 重要 的 内 容 ， 也 是 必须 让 用 户 了 解 的 内 容 。 视 客 中 心 弟 党 在 画面 中 518 的 地 
方 ， 以 此 为 基础 进行 视点 构图 更 能 突出 表现 视 咒 主题 ， 并 将 用 户 的 注意 力 集中 到 主要 内 容 体 


上 ， 如 图 6-23 所 示 。 
界 

面 

PicLab 


, 





CQWGQ 首 所 





图 6-23 视点 


(CJM) 常见 的 界面 

下 面 介绍 APP 常见 的 界面 类 型 。 

二 引导 界面 

APP 的 新 手 引 导 ， 原 本 的 出 发 点 很 简单 ， 类 似 于 一 个 简洁 的 产品 说 明 书 ， 其 主要 目的 
是 为 了 向 用 户 展示 该 APP 的 核心 功能 及 用 法 ， 一般 出 现在 用 户 首次 安装 APP 后 打开 的 时 
候 。 欢 迎 界 面 一 般 为 2 ~ 5 屏 的 全 屏 静 态 图 ， 左 右 滑 动 进行 翻 页 ， 有 跳 过 按钮 、 新 功能 指 
示 及 操作 引导 ， 一 般 用 蒙 版 加 第 头 指引 的 形式 完成 ， 如 图 6-24 所 示 。 
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旅游 攻略 


旅游 攻略 


®) 玩 什 么 ? 


吃 什么 ? () 





国 欢迎 界面 设计 /APP 启动 界面 
设计 

欢迎 界面 像 是 应 用 的 一 道门 ， 在 
使 用 前 给 用 户 一 个 提示 ， 它 通常 包含 
图 标 、 版 本 号 、 加 载 进度 等 信息 。 设 
计 可 以 根据 产品 风格 随意 发 挥 ， 与 图 
标 呼应 ， 强 化 产品 的 印象 ， 如 图 6-25 
所 示 。 

欢迎 界面 的 制作 要 点 如 下 。 


住 哪里 ? 


旅游 攻略 


(Ey 


更 多 实用 贴 士 


6000000 


图 6-24 引导 界面 


老 克 元 钥 Ta 
2014.02.14 
米 聊 2014 1.0.930 





旅游 攻略 





旅行 ,从 这 里 开始 ! 








图 6-25 局 动 界 面 


展示 内 容 要 简单 明了 ， 采 用 最 新 的 交互 及 操作 方式 ， 只 展示 APP 最 核心 、 关 键 
的 操作 ， 要 留 给 用 户 探 索 和 发 现 的 余地 ， 也 就 是 在 情理 之 中 吊 吊 用 户 的 口味 。 
展示 内 容 应 当 连 贯 、 有 一 定 的 逻辑 关系 ， 按 照 一 定 的 顺序 有 机 的 排列 。 如 先是 
亮点 模块 的 介绍 再 是 应 用 整体 呈现 ， 或 者 按照 一 个 主打 功能 的 APP 设计 操作 流 
程 介绍 。 总 之 做 到 有 主 有 次 ， 再 到 最 后 静 静 等 竺 用户 点 击 “ 开 始 体验 ” 那 一 刻 。 
每 页 只 放 一 个 重点 内 容 ， 切 忌 堆 砌 内 容 。 每 一 个 画面 都 有 一 个 重点 ， 可 能 是 文 
字 也 可 能 是 图 。 这 样 做 是 为 了 让 用 户 快速 阅读 跳 过 ， 了 解 APP 里 面 最 核心 的 东 
西 。 欢 迎 界 面 只 是 用 户 第 一 次 阅读 的 宣传 册 。 

保持 一 致 的 设计 风格 必须 保证 欢迎 界面 的 设计 风格 与 产品 的 气质 一 致 ， 不 会 
误导 用 户 习 惯 或 是 操作 ， 常 用 的 表现 手段 有 局 部 放大 、 手 绘 箭头 、 讲 故事 情 
i 

采用 创意 的 广告 词 或 引导 语 ， 这 些 或 许 是 APP 的 点 睛 之 笔 ， 值 得 重视 。 在 文案 
上 也 是 需要 非常 考究 的 ， 要 使 用 一 般 人 都 听 得 懂 的 词 。 

















总 之 最 佳 的 APP 欢迎 界面 设计 不 是 一 本 冷冰冰 的 说 明 书 ， 而 是 需要 设计 师 真 正 从 用 


户 的 角度 去 理解 用 户 对 于 欢迎 界面 的 需求 及 用 户 阅 读 引导 页 的 场景 。 


图 主要 的 功能 界面 设计 


以 iOS 为 例 ， 功能 界面 的 结构 通常 自 上 而 下 分 别 是 状态 栏 、 导 航 栏 、 标 签 栏 、 工 具 栏 。 
根据 不 同 功能 的 界面 ， 贡 见 的 设计 方式 有 以 下 几 种 。 








列表 视图 : 适合 目录 、 导 航 等 多 层级 的 界面 ， 将 信息 一 级 级 的 收 起 ， 最 大 化 地 
息 。 


展示 分 类 信 

分 层 的 界面 : 利用 iPhone 本 身 独 有 的 特性 让 其 固定 ， 或 牌 直 、 水 平 深 动 ， 市 
省 空间 。 

拟 物化 设计 : 适合 实现 独立 功能 的 界面 设计 ， 界 面 细节 逼真 写实 ， 以 现实 的 元 
素 和 操作 唤起 用 户 共 鸣 。 


\C 巧 界面 切 图 与 导出 


用 户 看 到 的 产品 界面 并 非 设计 师 呕 心 沥 血 创作 的 效果 图 ， 而 是 将 一 个 个 单独 的 切 图 
经 开发 和 组 合 拷 术 实 现 的 。 切 图 作为 设计 师 与 开发 者 之 间 的 “桥梁 ”， 它 的 作用 很 关键 ， 
合适 的 切 图 、 精 准 的 位 置 可 以 最 大 限度 地 还 原 效 果 图 的 设计 ， 精 妙 的 切 图 更 会 有 事 半 功 
倍 的 效果 。 

国 设计 中 需要 切 出 来 的 元 素 

APP 界面 由 状态 栏 、 导 航 栏 、 标 签 栏 及 内 容 区 域 组 成 ， 如 图 6-26 所 示 。 其 高 度 尺 十 
lle 











表 6-1 APP 界面 不 同 区 域 的 高 度 尺寸 单位 : PX ( 像素 ) 


























iPhone4-5s 1IPhone6 iPhone6 plus Android (720X 1280) 从 
40 px 60 px 50 px 框 
2 
界 
面 
设 
1 
] 
3 eee00 Verizon 全 4:21 PM 
一 拓 特 索 ，。 QQ 找 宝 由 
a Today's Faahion Rs .十 Ti 
| BL eria as a 2 : 
ESR Eh pL 
多 SUNUSURU 
La 
¥en jor Bp 但 
六 Faod 号 OPY 
s 
Tam hres nbd OU 
EE Bir. Gmt 
画 
加 Edy 9 
本 
P| Frigmds 切换 图 标 
wl Br 二 1 
图 6-26 组 成 部 分 图 6-27 需要 切 出 的 元 素 


加 点 九 切 图 

我 们 经 常会 做 一 个 俗称 “点 九 ”的 切 图 ,什么 是 “点 九 ” 呢 ?“ 点 九 ” 是 Android 平 
台 处 理 图 片 的 一 种 特殊 形式 ， 由 于 文件 的 扩展 名 为 “.9.png”， 所 以 被 称 为 “点 九 ”。“ 点 
九 ” 也 是 在 Android 平台 多 种 分 辨 率 需 适 配 的 需求 下 发 展 出 来 的 一 种 独特 的 技术 。 它 可 以 
将 图 片 横向 和 纵向 随意 进行 拉 伸 ， 而 保留 像素 精细 度 、 渐 变质 感 和 圆 角 的 原 大 小 ， 实 现 多 
分 辨 率 下 的 完美 显示 效果 ， 同 时 减少 不 必要 的 图 片 资 源 占用 ， 可 谓 切 图 利器 。 
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EC a a sa 
一 个 中 间 区 域 ， 如 图 6-28 所 示 。4 个 角 是 不 做 拉 伸 的 ， 所 以 能 一 直 保 持 圆 角 的 清晰 状态 ， 
而 两 条 水 平 边 和 垂直 边 分 别 只 做 水 平和 垂直 拉 伸 ， 所 以 不 会 出 现 边 会 被 拉 粗 的 情况 ， 只 有 
中 间 用 黑 线 指定 的 区 域 做 拉 仲 ， 结 果 是 图 片 不 会 走样 。 

智能 手机 中 有 自动 横 屏 的 功能 ， 同 

一 幅 界 面 会 随 着 手机 ( 或 平板 电脑 ) 中 方 
向 传感器 的 参数 不 同 而 改变 显示 的 方向 ， 
在 界面 改变 方向 后 ， 界 面 上 的 图 形 会 医 
为 长 宽 的 变化 而 产生 拉 促 ， 造 成 图 形 的 
le 

大 家 都 知道 Android 平台 有 多 种 不 全 
同 的 分 辨 率 ， 很 多 控件 的 切 图 文件 在 被 辆 El 
放大 拉 伸 后 边 角 会 模糊 失真 。 在 Android 平台 下 使 用 点 九 PNG 技术 可 以 将 图 片 横向 和 纵 
向 同时 进行 拉 伸 ， 以 实现 多 分 辩 率 下 的 完美 显示 效果 。 

如 图 6-29 所 示 ， 普 通 拉 伸 和 点 九 拉 伸 的 效果 对 比 很 明显 ， 使 用 点 九 PNG 技术 后 仍 
能 保留 图 像 的 渐变 质感 和 圆 角 的 精细 上 度 。 





PNG 原 图 


普通 拉 伸 效果 点 九 拉 伸 效果 





图 6-29 拉 伸 对 比 
全 在 Photoshop 中 绘制 点 九 切 图 
了 解 了 点 九 切 图 的 原理 ， 下 面 来 学 习 点 九 切 图 的 绘制 方法 。 











PS 文件 [篇 每 [日 上 国 你 加 | 图 层 山 类型 () 选择 (9) 洲 第 


() | 打开 绘制 好 的 图 ， 使 用 “ 裁 喜 ee 
工 上 其 ” 沿 看 图 片 边 绎 裁 罚 ， 如 FE 
图 6-30 所 册 ESA | aeN shifrcwit 上 


Whi 央行 “ 图 像 2 6 画布 大 小 ” 命 9》 人、 命 今 ， 自动 对 比 度 [U) 吉 E+ShifrcCtrl+L 
() 如 图 6-31 所 示 。 








言 动 颜色 [OQ) shift+ctrl+B 











Blt+Ctr|+I 














1 复制 (D)... 
图 6-30 裁剪 后 6-31 执行 “图 像 ”1 “画布 大 小 ”命令 











一 当前 大 小 : 22.4K 了 
宽度 : 182 像素 CE“] 加 2 px， 如 图 6-32 所 示 。 
全 于 [ 取消  ] 


一 新 建 大 小 : 23.7K 

宽度 (W): 184| 像素 了 

高 度 (H): 44 像素 ~ 
回 相 对 (R) 


画 弹出 对 话 框 ， 将 宽度 和 高 度 均 增 












0 4 确定 后 效果 如 图 6-33 所 示 。 














图 6-32 修改 画布 大 小 图 6-33 确定 后 的 效果 


(})D 碍 看 图 中 的 可 拉 掉 区 域 ， 即 不 包括 圆 朋 、 光 洋 等 特殊 区 域 ， 如 图 6-34 所 示 。 


提示 : 如 有 果 不 能 确定 某 一 区 域 
是 不 是 可 拉 伸 区 域 ， 可 以 在 绘制 
之 前 将 图 片 的 该 部 分 拉 伸 一 下 试 试 ， 如 
果 图 片 出 现 了 失真 ， 该 区 域 就 是 不 可 拉 
伸 区 域 。 








6-34 可 拉 伸 区 域 
() 0 设置 填充 颜色 为 黑色 ， 使 用 “画笔 工具 ”对 图 片 四 周 的 透明 区 域 进行 绘制 填充 ， 国 
如 图 6-35 所 示 。 面 








6-35 绘制 效果 
执行 “文件 ”|“ 存 储 为 Web 所 用 格式 ”命令 ， 在 打开 的 对 话 框 中 设置 优化 格式 
为 “PNG-24”， 如 图 6-36 所 示 。 

单 击 “确定 ” 投 钮 ， 在 打开 的 对 话 框 中 设置 文件 名 称 ， 其 扩展 名 为 .9.png， 如 
图 6-37 所 示 ， 即 完成 了 点 九 切 图 的 绘制 。 


= 所 
OO 一 ] 











原稿 :优化 | 双 联 汪 四 联 








































































































| 图 _ - - “三 
人 人 在 中， 硬 训 AF 设计 - @ 请 己 回 - 
EE [|] | x | 
和 吕 多 毕 sex 
| 是 沪 问 的 位 置 出 第 ] 齐 2015/12/1 13:48 
| 习 
讲 面 
库 
1 用。 
计算 机 
4 | rs 
名 本 
格式 : 仅 限 图 多 > 取消 
i = 
:| 设置 : Es 中 
百 画 [ ia 回 一 6G 8: Apha: 一 十 六 进 制 : -- 索引 : 一 | 1 EFIE EE 
名 ER | Es 所 有 切片 
图 6-36 设置 优化 格式 图 6-37 修改 文件 名 称 
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photoshop 创意 者 pp 元 素 设 计 从 入 门 到 精通 


提示 : 上 部 为 横向 可 拉 伸 区 域 ， 左 侧 为 提示 ， 手绘 的 黑 线 拉 伸 区 闫 1 

纵向 可 拉 伸 区 域 ,这 两 个 部 分 按照 可 拉 伸 色 必 须 是 划 000000， 透 明度 为 
区 域 的 特点 确定 黑色 条 纹 的 长 短 ， 下 方 为 横向 内 100%， 并 且 图 像 四 边 不 能 出 现 半 透明 
容 区 域 ， 右 侧 为 纵向 内 容 区 域 ， 内 容 区 域 的 意思 像素 ， 否 则 图 片 不 会 通过 Android 系统 编 
就 是 如 果 这 个 按钮 是 一 个 窗口 ， 右 下 两 区 域 延 伸 译 ， 导 和 致 程序 报错 。 


成 为 的 长 方形 就 是 可 以 显示 内 容 的 区 域 。 


RERDIWIORE 





”READIMORE : 


主流 类 型 APP 界面 设计 


| 本 节 介绍 不 同 界面 的 设计 ， 包 括 系统 界面 、 应 用 界面 和 主题 界 


wy 面 诗 种。 





CI 手机 系统 照相 APP 界面 
下 面 介 绍 手 机 系统 照相 界面 的 绘制 ， 图 6-38 所 示 为 制作 流程 图 。 








图 6-38 制作 流程 图 


01 新 建 空 昌文 档 ， 尺 
寸 为 640X960 px。 然 
后 打开 取材 图 片 ， 拖 入 文档 中 ， 
如 图 6-39 所 示 。 
使 用 绘图 工具 绘制 图 
02 形 ， 如 图 6-40 所 示 。 





图 6-39 添加 素材 图 6-40 绘制 图 形 








(})3 为 图 层 添加 “内 阴影 ”和 “图 案 胎 加 ”图 层 样式 ， 如 图 6-41 所 示 。 























内 阴影 
结构 图 案 于 加 
图 案 
混合 模式 伯 ): 变 高 
不 透明 度 (0): ==75 25 % 滥 冶 模 式 但 ): 正常 
角度 (A): | ， | 90 ” 度 园 使 用 全 局 光 (G) 不 透明 度 改 ): 100 驳 
距 高 D): 上 5 像素 
阻塞 (co): 5 0  % 图 案 : 国 | | 贴 紧 原 点 的 | 
大 小 (5): 3 一 = 10 像素 | 
品质 编 训 (6); ， TS 100 ” 驳 
等 训 纺 | -| 口 济 Sa 号 与 图 层 链 接 的 
刀 包 人 ，A o% | 
杂 色 (N): G 0 | 设置 为 默认 值 | | 复位 为 默认 值 | 
| 设置 为 默认 值 | | 复位 为 默认 值 | 























图 6-41 添加 图 层 样式 
O 4 执行 确定 操作 后 的 图 像 效果 如 图 6-42 所 示 。 然 后 复制 图 层 ， 双 击 缩 上 略图， 修改 
填充 颜色 ， 如 图 6-43 所 示 。 
OD 为 图 层 添 加 网 层 蒙 版 ， 在 蒙 厂 中 拉 出 渐变 色 ， 按 住 Alt 键 单 击 莹 版 可 以 查看 蒙 
版 的 绘制 效果 ， 如 图 6-44 所 示 。 






os 


图 6-42 确定 后 的 效果 图 6-43 复制 并 修改 颜色 图 6-44 绘制 蒙 版 


(OE ee Oe 


样式 ， 如 图 6-46 所 示 。 


内 阴影 
结构 


混合 模式 (6): ” 变 高 Md 
不 透明 度 (0): 一 CS > 25 %% 
前 度 (A): | 《* | 90 度 同 使 用 全 局 光 (G) 


距离 {D0): 多 5 像素 
阻塞 (0): (一 0 % 
tt 像素 


品质 


各 | -| 消除 锯齿 (0) 


杂 色 人 N): G6 % 


不 透明 度 为 55%， 如 图 6-45 所 示 。 








| 设置 为 默认 值 “| | 复位 为 默认 值 














图 6-45 设置 图 层 后 的 效果 6-46 添加 图 层 样 式 
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户 
9) 
DD 


闻 光 本 油料 南 让 脱 





s 因 pp 元 素 设 计 从 入 门 到 精通 


更 辩 gU| Photoshop 创意 


U8 (09 添加 素材 图 ， 设 置 图 层 混合 模 


EN Rs NG A 





执行 确定 操作 后 的 图 像 效 果 如 
图 6-47 所 示 。 





图 6-47 确定 后 的 效果 图 6-48 添加 素材 























|] ( 添加 图 层 莹 版， 绘制 莹 版 后 的 |] 为 图 层 添 加 “内 阴影 7 图 层 样 式 ， 
效果 如 图 6-49 所 示 。 如 图 6-50 所 示 。 
i Ee ee SS 内 阴影 
WES | 结构 
De 混合 模式 @): 颜色 减 淡 
不 透明 度 (O): 39 % 
na (MY) = 度 回 使 用 全 局 光 (G) 
距离 D): 三 - 5 像素 
阻塞 (0): 4 0 % 
大 小 (5): 所 8 像 吉 
品质 
|] I 
杂 色 (N: 4 % 
[设置 为 点 认 值 | | 复位 为 默认 值 | 

















图 6-50 添加 图 层 样 式 


] 3 复制 一 层 ， 设 置 填充 为 0%， 
并 修改 “内 阴影 ”参数 ， 如 图 


图 6-49 添加 蒙 版 效果 


执行 确定 操作 后 的 图 像 效 果 如 
图 6-51 所 示 。 


WW 














6-—52 月 好 不 O 
内 阴影 
结构 
混合 模式 介 ): 严 加 Eg 
不 透明 度 (D): 85 wo 
角度 (A): | 50 ” 度 团 使 用 全 局 光 (6) 
距离 (D0): 4 1 像素 
阻塞 (0): < 0 % 
大 小 (5S): 65 1 像素 
品质 
等 高 线 : } - 站 消除 锯齿 (0 
杂 色 (N): 6 % 








| 设置 为 默认 值 。」 | 复位 为 默认 值 | 














图 6-52 修改 “内 阴影 ”参数 


] 站 确定 后 的 图 像 效 果 如 图 6-54 所 
示 。 


图 6-51 确定 后 的 效果 


|] 再 复制 一 层 ， 清 除 图 层 样式 ， 
添加 “投影 ”样式 ， 如 图 6-53 
所 示 。 
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投影 
结构 
温 合 模式 (6): 正常 ~ 国 因 
不 透明 度 (o): 条 %% 
角度 (A): | ， | -90 度 回 使 用 全 局 光 (G) 
距离 D): 后 3 像素 
扩展 (R): 4 0 % 
大 小 (5): 下 5 像素 
品质 
等 高 线 : L | 口 消除 锯齿 (0) 
杂 色 (人 N): (5 0 oo 
同 图 层 控 空 投影 (U) 
[设置 为 默认 值 | | 复位 为 默认 值 

















图 6-53 添加 “投影 ”样式 6-54 确定 后 的 效果 


] 再 复制 一 层 ， 修 改 “投影 ”参数 ， 并 设置 “内 阴影 ”， 如 图 6-55 所 示 。 


es 内 阴影 


混 言 模式 (6)， 正常 ~ 国 国 混 言 模式 (6): 正常 ~ 国 国 


不 透明 度 (0): a 52 和 不 透明 度 (0): 47  % 












角度 (A): 1 | -55 。 度 回 使 用 全 局 光 人 角度 :| | |】 50 度 团 使 用 全 局 光 人 
距 襄 人 D): 一 3 怪 素 距离 种 ):; 全 4 像素 
扩展 fi 驴 阻塞 (0)! =” 0 4 


太 小 介 ); [ 生 避 像素 二 小 全) 四 了 2 像素 
— 中 后 一 = 


等 高 续 : | - 站 消除 句 齿 由 等 高 绪 : | -| 站 消 际 锯齿 (L) 


杂 色 的 ): 二] Ei 来 色 人 后)， [二 ho 


回 图 层 控 空投 影 () 设置 为 默认 值 豆 全 区 于 认 革 
设置 为 默认 值 | | 复位 为 默认 什 


户 
9) 
UD 

















闻 殉 团 油 次 商 代 有 网 





图 6-55 修改 图 层 样 式 


] Wi 执行 确定 操作 后 的 图 像 效 果 如 18 使 用 “和 宅 形 工具 ”绘制 定形 ， 
图 6-56 所 示 。 如 图 6-57 所 示 。 


YY 





图 6-56 确定 后 的 效果 图 6-57 绘制 矩形 


] 为 图 层 添 加 “ 投 中 复制 图 层 ， 设 置 填 山中 确定 后 的 图 像 效 
A | 林村 | 其) i 充 为 0%, 并 修改 “ 投 果 如 图 6-60 所 示 。 
图 6-58 所 示 。 影 ” 参 数 ， 如 图 6-59 所 示 。 
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更 哆 2U Photoshop 创意 .Oi 元 素 设 计 从 入 门 到 精通 





















































投影 投影 
结构 结构 
混合 模式 (6): 正常 ~ 国 国 混合 模式 (6): 柔 光 M 
不 透明 度 (O): 89 % 不 透明 度 (D): Zz 89 % 
角度 (A):  ， | -50 ” 度 回 使 用 全 局 光 (G) 角度 (A): ( 上 ) 8 度 回 使 用 全 局 光 (G) 
距离 OD): 所 4 ”像素 距离 0): 上 5 2 ”像素 
扩展 (R): G5 0 % 扩展 (RR): 5 0 % 
大 小 (5): 坚 5 像素 大 小 (5): 里 5 像素 
图 6-58 添加 “投影 ”样式 图 6-59 修改 参数 图 6-60 确定 后 的 效果 


wy 复制 图 层 ， 并 修改 图 层 样式 ， 如 图 6-61 所 示 。 
































内 阴影 人 图 过 委 加 投影 
结构 > 图 案 结构 
混合 模式 (0): 柔 光 v 回 仿 色 混合 模式 (6): 正常 
混合 模式 (6): 正常 ” [| 不 透明 度 (P); 9 100 % 直通 明 度 W)， pr 混合 模式 (6): 正常 ” Esl 
不 透明 度 (0): 29 |% 浙 妆 :>| © 反 向 () 不 透明 度 (0): = 一 5 一 一 67  % 
样式 (): 线性 。 团 与 图 局 3 齐 . 
角度 (A): ( 1 )-50 。 度 四 使 用 全 局 光 (6) a 一 一 一 角度 (A): ( | )】 56 度 回 使 用 全 局 光 人 
距离 D): 5 2 像素 iM): 一 0% WO 距 高 D): G 1 像素 
月 草 O:G 0 I% [二 为 加 认 什 扩展 QR): 人 0 Je 
: [到 本 为 轩 认 什 “】 [大 位 为 默认 人 
大 小 (5): 三 65 像素 | En 大 小 (3): 5 1 像素 



































图 6-61 修改 图 层 样 式 


Dn 设置 填充 为 0%， 效 果 如 图 D4 和 现 遇 晶 
Mr 如 图 6-63 所 示 。 





图 6-62 效果 图 6-63 绘制 矩形 


< 站 为 图 层 评 加 “内 阴影 ”“ 颜 色 有 登 如 ”和 “投影 ”样式 ， 如 图 6-64 所 示 。 
































NR ee 

温 合 模式 (6): 正常 ~ 加 一 混合 模式 (6): 正常 ” 

趟 透明 度 (D): ZN 100  % 混合 模式 (6): 正常 了 本 和 不 透明 度 (D): z5 24 o% 

“] 身 日 OO): ~ %% | 

角度 (A): | ，。 | -90 ” 度 回 使 用 全 局 光 (G) 不 透明 度 (0): S 100 角度 (A): | ， | 90 度 回 使 用 全 局 光 (G) 
距离 D): 人 2 ”像素 | 设置 为 默认 值 | | 揽 位 为 默认 值 | 距离 D): 人 1 像素 
阻塞 (0: 4 0 % 扩展 fR): G 0 % 
大 小 (S): Ce | 像素 大 小 (S): Ce 像素 




















图 6-64 添加 图 层 样式 


混合 模式 (6): 正常 ~ 到 

不 透明 度 (O): ZS 64 % 
角度 (A): | ， | -90 度 回 使 用 全 局 光 (G) 
距离 (0D): 人 1 像素 
扩展 (R): 4 0 % 
大 小 (5S): 正 4 像素 


图 6-65 确定 后 的 效果 图 6-66 添加 “投影 ”样式 


) 0O 执行 确定 操作 后 
的 图 像 效 果 如 图 

6-65 所 示 。 
上 复制 图 层 ， 清 际 图 
层 样式 ， 然 后 添加 


“投影 ”样式 ， 如 图 6-66 所 
并 设置 填充 为 0%。 
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绘制 图 形 ， 如 图 6-67 所 示 。 然 后 设置 图 层 混 
为 40%。 

复制 图 层 ， 将 其 
制 和 着 形 ， 如 图 6-69 所 示 。 


i. 


合 模 式 为 “ 闫 色 加 深 ”、 个 歼 明 度 


进行 水 平 翻转 ， 效 果 如 图 6-68 所 示 。 然 后 使 用 “和 定形 工具 ” 绘 


图 6-67 绘制 图 形 图 6-68 复制 并 翻转 


30 


图 像 效 果 如 图 6-71 所 示 。 


图 6-69 绘制 矩形 


为 图 层 添加 “渐变 时 加 ”和 “投影 ”样式 ， 如 图 6-70 所 示 。 执 行 确定 操作 后 的 





























渐变 琶 加 投影 
渐变 
混合 模式 (0): 正常 ~ 加 结构 
不 透明 度 (p): 37 赣 合 模式 人 @): 正常 ~ 国 国 
= 不 透明 度 (0): 元 % 
样式 (): 线性 ~ 团 与 图 层 xj 刘 () 
角度 QW: ( 上 ) 50 度 前 度 (A): 人 人 1) 30 度 站 使 用 全 局 光 (G) 
缩放 (5): 100  % 距离 (D0): ， s 1 像素 
设置 为 默认 值 | | 复位 为 默认 值 | 扩展 QR): /= 一 ”一 一 0 % 
大 小 (5): 上 2 私 索 
图 6-70 添加 图 层 样式 
ol elation by pth 
各 其 拖 入 到 文档 ， 绘 制 的 短 


中 ， Wy ipahun 如 Wl 6-73 所 示 。 


图 6-72 所 示 。 


图 6-71 确定 后 的 效果 


lh 狐 建 图 层 , 和 在 正方 

绘制 阴影 ， 并 人 设置 
图 层 不 透明 上 度 为 99%， 如 图 
6-74 所 示 。 





图 6-72 添加 图 片 图 6-73 添加 蒙 版 效果 
了 A ra 于， 修改 3 ” 绘制 窍 形 ， 需 
则 民风 出 充 颜 色 为 白 


色 ， 并 设置 混合 模式 为 
“ 吕 光 ”、 不 透明 度 为 
32%， 如 图 6-76 所 示 。 


如 图 6-75 1 


图 6-74 绘制 阴影 


nD O 绘制 图 形 ， 设 置 混 
合 模 式 为 “ 壳 加 ”7\、 


不 透明 度 为 61%， 如 图 6-77 
所 示 。 


又 








叶 gU| Photoshop 创意 : Oi 元 素 设 计 从 入 门 到 精通 











图 6-75 复制 并 修改 不 透明 度 图 6-76 绘制 矩形 图 6-77 绘制 图 形 


1 设置 不 透明 度 为 86%、 填 充 为 0%， 并 为 图 层 添加 图 层 样式 ， 如 图 6-78 所 示 。 















































ee 渐变 又 加 投影 
混合 模式 @)， 正常 ~ 国 rE 结构 
不 透明 度 (O): 从 69  % 混合 (O): 正常 了 加 
角度 (A): ( ，] 区 度 回 使 用 全 局 光 G) 不 透明 度 P) 一、10  % 混合 模式 (6): 正常 莉 梧 
距离): 二 二 像素 区， [站 | 反问 (R) 不 透明 度 (D): 44 9 
阳 守 (0: 6 0 % 样式 ()， 得 向 ~” 同 与 图 层 对 让 
大 小 6): 5 4 像素 角度 (A): | ，) -90 ” 度 回 使 用 全 局 光 (G) 
品质 角度 :一 )180 度 
四 — 距离 D): 上 2 
等 高 线 ; 4 口 消 绿 锯 占 D 缩放 (5): 二 一 = 一 一 ” 100 % 
杂 色 (N): 65 % 扩 展 (R): ， 全 0 9o 
[ 设 桔 加: 认 值 | [复位 为 默认 值 | . 
SRTNESESZRRTE 大 小 (5): 本 5 像素 


























图 6-78 添加 图 层 样 式 


3 执行 确定 操作 后 的 图 像 效 果 如 30 添加 系 材 图 片 , 如 图 6-80 所 示 。 
图 6-79 所 示 。 





图 6-79 确定 后 的 效果 图 6-80 添加 素材 图 片 

人 (|) 设置 图 层 混合 模式 为 “ 柔 光 ”、 不 透明 度 为 55%， 并 添加 蒙 版 ， 效 果 如 图 
6-81 所 示 。 

4] 绘制 圆 角 矩形， 设置 填充 为 09%， 并 为 图 层 添加 图 层 样式 ， 如 图 6-82 所 示 。 


描 边 投影 





结构 结构 
大 小 Se 1 像素 混合 模式 (6): 正常 ~ 国 国 
位 置 (p): 外 部 ~ 不 透明 度 (0): = ”四 % 
混合 模式 (6): 正常 ” 角度 (A): | ， ) -90 度 回 使 用 全 局 光 (G) 


不 透明 度 (0): 2 36 % 





中 高 D): 上 一 3 ”像素 
扩展 RQR): (== 0 % 
大小 (5): SE | 10 像素 


填充 类 型 (F): 渐变 ~ 

浙 六 [站 | | 反 向 (R) 

样式 (D): 线性 ~ 财 与 图 层 对 齐 (6) 
角度 :上 | 90 一度 癌 信 色 


缩放 (0): = 100 % 


等 高 线 : | 4 中 消除 回 齿 人) 


杂 色 (N): G % 


刀 图 层 控 空 投影 (U) 
| 设置 为 默认 值 。| | 复位 为 默认 值 | 








| 设置 为 默认 值 | | 复位 为 默认 值 | 




















图 6-81 效果 图 6-82 添加 图 层 样 式 








省 执行 确定 操作 后 4 避 唱 图 属 轴 号 寡 A 绘制 图 形 并 添加 
的 图 像 效 果 如 图 图 层 样 去 ， 效 果 图 层 样 式 溃 轿 | 


6-83 所 示 。 如 图 6-84 所 示 。 6-85 所 示 。 





图 6-83 确定 后 的 效果 图 6-84 复制 图 层 并 修改 图 6-85 绘制 图 形 并 添加 图 层 样式 


/| 用 同样 的 方法 绘制 图 形 并 添加 “投影 ”样式 ， 效 果 如 图 6-86 所 示 。 然 后 绘制 图 
形 ， 并 添加 图 层 样式 ， 如 图 6-87 所 示 。 





















































描 边 内 发 光 渐变 县 加 
9 结构 新 变 
大 小 (8): 可 ”像素 pe Cy 
位 置 P)， 内 部 了 混合 模式 (6): 正常 ~ 混合 模式 (0): 县 加 MM 仿 色 
混合 模式 (6)， 正 党 - 不 透明 度 (0): G 0 % 不 透明 度 (P): 5 23  % 
不 透明 度 (0): Ny 100% 杂 色 (N): G 0 % 新 六 [站 | [| 反 向 (R) 
填充 类 型 F) 渐变 9 [L_ | 样式 (D: 线性 ~ 回 与 图 层 对 齐 四 
渐变 : 反 向 人 
样式 0: 线性 ~” 回 与 图 民 挤 名 ly EE: 
~- ， 子 , 
角度 A:( | ) 50 度 回 仿 色 方法 Q): 柔和 ~ 缩放 (S): 100 史 
缩放 fc: 一 9 源 : @ 居中 但 ) 边缘 (G) = 
a | 设置 为 默认 值 | | 复位 为 默认 值 | 
< = 二 阻塞 (C) 11 9 
此 流量 为 承认 值 】 [复位 为 默认 值 | 
大 小 (S) 7 像素 
图 6-86 绘制 并 添加 图 层 样式 图 6-87 添加 图 层 样式 


40 设置 图 层 混合 人 柑 式 为 “排除 ”、 A”7 绘制 图 层 ， 设 置 图 层 混合 模式 
填充 为 0%, 效果 如 图 6-88 所 示 。 为 “亮光 ”、 盾 序 为 74%， 如 


图 6-89 所 示 。 
EM 
/ \ 


\ / 


耶 光 加 泗 并 商 让 胸 









A 人 ~ 





图 6-88 效果 6-89 绘制 图 形 
48 为 图 层 添 加 “渐变 登 加 ”和 “投影 ”样式 ， 如 网 6-90 所 示 。 执 行 确定 操作 后 的 
图 像 效 果 如 图 6-91 所 示 。 


投影 
结构 











颜色 亚 加 

颜色 

温 合 模式 (6): 色相 下 混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (O): a 国 |% 不 透明 度 (0): 一 20  % 





角度 (A): | ， | -90 ” 度 回 使 用 全 局 光 (G) nm 





[设置 为 默认 值 。| | 复位 为 默认 值 





距离 D0): CC 1 像素 
扩 展 QR): [全 0 % 
大 小 (S): Ce 像素 














6-90 添加 图 层 样式 6-91 确定 后 的 效果 
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photoshop 创意 者 pp。 元素 设计 从 入 门 到 精通 
更 辩 gU| oshop 区 








用 同样 的 方法 在 右 侧 绘制 图 形 ， 如 图 
6-92 所 示 。 

在 中 间 绘 制图 形 ， 并 进行 高 斯 模糊 ， 
如 图 6-93 所 示 。 





图 6-92 绘制 图 形 图 6-93 绘制 图 形 并 高 斯 模糊 


使 用 绘图 工具 绘制 线条 ， 如 图 6-94 所 示 。 然 后 为 图 层 添加 “内 发 光 ” 和 “外 友 
光 ” 图 层 样 式 ， 如 图 6-95 所 示 ， 并 拷贝 图 层 样 式 备用 。 




































































门 帮 光 外 发 光 
| 结构 结构 
0 7 混合 模式 (E): 正常 
es os 不 通明 度 (0): 100 % 
人 杂 色 N): 一。 % 
B[ lol | 
6 | | 
图 素 | 
图 素 
方法 (Q): 柔和 ~ i 
源 : 居中 日 加 边 综 (6) pe 
阻塞 (0): 人 me) % P):& 0 Yo 
大 小 (S): 三 - 像素 大 小 G): 辕 7 像素 
品质 品质 
等 高 线 : 轩 蛋 上 回 清 祭 句点 人) 等 高 线 ; | 四 - 加 | 消除 回 具 仙 ) 
范围 RR): Z5 % 范围 (R): zs % 
抖动 ): G 0 % 拉动 0): G 0 % 
[设置 为 默认 值 | [ 复位 为 点 认 值 | [设置 为 默认 值 | [ 复位 为 默认 值 | 
图 6-94 绘制 线条 图 6-95 添加 图 层 样式 


继续 绘制 线条 ， 如 图 6-96 所 示 ， 设 置 不 透明 度 为 8%， 并 粘贴 图 层 样式 ， 如 图 
6-97 所 示 。 然 后 使 用 绘图 工具 绘制 图 形 ， 如 图 6-98 所 示 。 





图 6-96 绘制 线条 图 6-97 粘贴 图 层 样 式 图 6-98 绘制 图 形 








癌 I 设置 图 层 混 合 模式 为 “亮光 ”填充 为 8%, 效果 如 图 6-99 所 示 。. 然 后 为 图 层 添加 “内 
及 光 ” 样 式 ， 效 末 如 图 6-100 所 示 。 





6-99 设置 混合 模式 与 填充 后 的 效果 





结构 





混合 模式 (6): 小 色 M 
不 透明 度 (0):， SC % 
杂 色 (N): Ce 0 % 


@0 oC | 














图 素 
方法 (Q@): 条 和 ~ 
源 :加 居中 介 加 边缘 (G) 
阴 塞 CC 0 = 





等 高 线 : [4 消除 锯齿 (0) 


拉动 0): == 一 0 % 




















设置 为 默认 值 复位 为 默认 值 

















图 6-100 添加 “内 发 光 ” 样 式 


D 4 添加 多 个 图 层 ， 绘 制 效果 如 图 6-101 所 示 。 然 后 使 用 绘图 工具 绘制 图 形 ， 如 图 


6-102 所 示 。 


中 中 添加 图 层 蒙 版 ， 在 蒙 版 上 进行 绘制 ， 然 后 设置 图 层 混 合 模 式 为 “ 滤 色 ”、 不 透 
明度 为 79%， 如 图 6-103 所 示 。 





6-101 绘制 效果 


图 6-102 绘制 图 形 


DO 为 图 层 添加 “外 发 光 ” 图 层 样式 ， 如 图 6-104 所 示 。 执 行 确定 操作 后 的 效果 如 


图 6-105 所 示 。 


站 ( 复制 几 个 图 层 并 分 别 修改 图 层 的 图 层 样 式 、 混 合 模 式 、 不 透明 度 及 填 完 ， 效 末 


如 图 6-106 所 示 。 





一 外 发 光 





结构 





混合 模式 (E): 正常 ~ 
不 透明 度 (0): se 100  % 
未 色 WIC 0 % 


@ DD oC 








图 素 一 一 
方法 (Q): 柔和 > 

扩展 P): C= 一 0 % 
大 小 SB): 2 一 =_=e 2] 像素 





- 品质 


等 高 线 : [A 加 清关 所 具 () 
范围 (R): 一 yy 一 50 % 
拉动 DD): (一 一 =» 0 % 




















| 设置 为 默认 值 | |[ 复位 为 默认 值 | 





图 6-104 添加 图 层 样式 














图 6-105 确定 后 的 效果 


图 6-106 复制 并 修改 效果 
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司 
SS 





255 








癌 SS 绘制 圆 ， 设 置 填充 为 64%， 如 图 6-107 所 示 。 然 后 为 图 层 添加 “渐变 车 加 ”、“ 图 
案 且 加 ”和 “外 发 光 ” 图 层 样式 ， 如 图 6-108 所 示 。 





















































渐变 到 加 图 - | 一 让 发 光 
渐变 - | 图 结构 
混合 模式 (0): 正常 - 混合 模式 (6): 正常 ~ 混合 模式 (E): 正常 ~ 
不 透明 度 (PF): 一 z、 不 透明 度 m; 一 7 一 一 0 % 不 透明 度 (0): 一 2 一 一 28 
新 变 : [| 回 反 向 0) 杂 色 (W: G 
样式 (): 线性 ~ 回 与 图 层 对 齐 外 图 案 ; 司 | [ 贴 紧 原 点 (A) 加 [jj @[ | 
角度 NJ: 上 )50 度 . 图 素 
ee ): mm 69 % 去 
缩放 (6): ZS 100  % 与 图 层 链 接 (9 方法 Q): 柔和 ~ 
和 扩展 (P): 4 0 
[王涛 庆 值 ] [ 妇 位 沽 i 认 目 ] [设置 为 球 认 值 | | 揽 位 为 默认 值 | 大 小 6): To 一 9 
图 6-107 绘制 圆 并 修 图 6-108 添加 图 层 样 式 
改 填充 效果 


丫 9 执行 确定 操作 后 的 效果 如 图 0b () 使 用 “ 横 排 文字 工具 ”输入 文字 ， 
6-109 所 示 。 如 图 6-110 所 示 。 





6-109 确定 后 的 效果 6-110 输入 文字 


6 在 上 方 绘制 矩形 并 汪 
加 图 层 样式 ， 效 果 如 

图 6-111 所 示 。 
6 用 前 面 介绍 的 方法 给 
制图 形 并 设置 效果 ， 
完成 绘制 ， 如 图 6-112 所 示 。 ” 旧 





图 6-111 绘制 图 形 图 6-112 完成 绘制 


(CJ 了 了 手机 系统 收音 机 APP 界面 


手机 收音 机 一 般 是 手机 系统 中 自 带 的 APP， 下 面 介 绍 手 机 系统 收音 机 界面 的 制作 ， 
6-113 所 示 为 制作 流程 图 。 





Jam Radio 
INAIR hund 


9) ~ S 







You MayAlso Like 





we] 


人 
YeslFM Hit FM Radio Track Love Radio Soul Music 


\ 








图 6-113 制作 流程 图 


() | 执行 “文件 ”I“ 新 建 ” 命 令 , 在 打开 的 对 话 框 中 设置 宽度 和 高 度 , 如 图 6-114 所 示 。 
然后 使 用 “和 窍 形 工具 ”绘制 矩形 ， 如 图 6-115 所 示 。 








名 称 (N): 未 标题 -2 
预 设 (P): 自 定 | 取消 

大 小 加 

宽度 (W): 640 像素 删除 预 设 (D).…. 

高 度 (H): 1136 像素 

分 辩 率 (R):| 72 ”| 像素 /英寸 
颜色 模式 (M): RGB 颜色 ~ 8 位 
背景 内 容 (C): 白色 


于 泌 国 河 汀 责 如 岂 


图 像 友 小 : 
2.08M 


颜色 配置 文件 (D): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 方形 像素 











图 6-114 新 建文 档 图 6-115 绘制 矩形 


() 为 图 层 添加 “渐变 营 加 ”图 层 样式 ， 人 然后 单 击 渐变 色 ， 在 打开 的 对 话 框 中 设置 
渐变 色 ， 如 图 6-116 所 示 。 单 击 “ 确 定 ” 按 钮 后 ， 效 果 如 图 6-117 所 示 。 


ne a 
E a 质变 绽 丝 时 
















































样式 一 渐变 到 加 - 
可 | | 站 站 - 
口 斜面 和 浮雕 混合 模式 (0): 正常 v 同 仿 色 
局 等 高 线 不 透明 度 p): = 75 % 
口 纹理 ER 
口 描 边 样式 (): 径 向 ~ 贺 与 图 层 对 齐 们 
= 角度 (V): {| ”45 度 
可 内 发 光 7 | 
回 光泽 缩放 (S): PS | 100  % 名 称 (N): Custom 
号 颜色 全 加 攻 TTNESSTTTT 司 渐 杰 类 型 (T): 实 底 
7 潭 变 要 加 
口 图 案 琶 加 平滑 度 (M): | 100 | % 
加 外 发 光 
本 投影 














图 6-116 添加 “渐变 三 加 ”图 层 样式 图 6-117 效果 
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更 装 gU| Photoshop 创意 里 PP ”元 素 设计 从 入 门 到 精通 
m= 0 





使 用 绘图 工具 绘制 图 形 ， 如 图 复制 图 层 ， 将 其 垂直 翻转 ， 
6=118 所 示 。 并 设置 不 透明 度 为 66， 如 图 


6-119 所 示 。 





图 6-118 绘制 图 形 图 6-119 复制 并 修改 不 透明 度 


绘制 图 形 并 输入 文字 ， 如 图 6-120 所 示 。 然 后 使 用 “椭圆 工具 ”绘制 正 圆 ， 设 
置 不 透明 上 度 为 10%， 并 为 图 层 添 加 “ 描 边 ”样式 ， 效 果 如 图 6-121 所 示 。 


FM Radio 


[Pr ry 
画面 面世 厦 间 
硬 租 面 古 区 总 
一 
gp- 





= 


图 6-120 绘制 图 形 并 输入 文字 图 6-121 绘制 圆 并 设置 效果 


使 用 “钢笔 工具 ”绘制 曲线 ， 使 用 “椭圆 工具 ”绘制 正 圆 ， 
如 图 6-122 所 示 。 如 图 6-123 所 示 。 


FM Radio FM Radio 





图 6-122 绘制 曲线 图 6-123 绘制 正 圆 








为 图 层 添加 “内 阴 


屿 2 “渐变 奏 加 ” 和 “投影 ” 


样式 ， 如 图 6-124 所 示 。 


























一 内 阴影 

混合 模式 (8) 正常 ~ 

不 透明 度 (0): 6  % 
角度 (A): |  )120 。 度 回 使 用 全 局 光 (G) 
距 高 D): /一 一 1 像素 
阻塞 (0): CS 0 % 
大 小 (5): G5 0 像素 

一 品质 i 

党 线 | 了 上 回 消除 妮 具 人 
杂 色 (N): (5 0 % 





设置 为 默认 值 复位 为 默认 值 


渐变 到 加 
新 
混合 模式 (0): 正常 ~ 口 仿 色 
不 透明 度 D 一 一 10 % 
浙 交 : [有 [| 口上 on) 
样式 0: 线性 ~ 加 与 图 层 对 齐 () 
角度 W: | 上 ) 50 度 





























缩放 (5): 人 100 % 











设置 为 默认 值 复位 为 默认 值 


-投影 一 一 


结构 | 
混合 模式 (6)， 正常 ~ 国 国 
不 透明 度 (D): 一 CS 20 % 








角度 (A): (| 】 8 度 加 使 用 全 局 光 (G) 


距离 O): 全 2 像素 























扩展 R: 一 0 % 
大 小 5): 一 一 6 像素 
二 一 和 
等 高 线 [A 消 脓 据 具 (0) 
隶 色 (NIG 0 % | 
团 图 层 挖 空 投影 (J) | 














设置 为 默认 值 复位 为 默认 值 











6-124 添加 图 层 样式 


在 圆 中 间 绘 制 一 个 填充 颜色 为 #4b3a48 的 小 圆 ， 设 置 图 层 不 透明 度 为 30%， 效 
果 如 图 6-125 所 示 。 然 后 使 用 “ 横 排 文字 工具 ”输入 文字 ， 如 图 6-126 所 示 。 


FM Radio 


图 6-125 绘制 圆 





绘制 图 形 并 输入 文字 ， 如 图 


6-127 所 示 。 


FM Radio 


重创 匡 a 
表册 区 太志 
Ti 


Jam Radio 





图 6-127 绘制 图 形 并 输入 文字 





FM Radio 





图 6-126 输入 文字 
继续 绘制 图 形 并 输入 文字 ， 如 
图 6-128 所 示 。 


FM Radio 


CE 
Tr 


加 加 
[二 | 


Jam Rio 


INAR Jessie J - Thunder 


G) ~ 2 





图 6-128 绘制 图 形 并 输入 文字 


259 





闻 光 本 油料 南 异 有 典 





| 册 a) le Ne le | 3 DO 
6-129 所 示 。 绘制 图 形 ， 如 图 6-130 所 示 。 


Jam Radio 
] - Thunder 


INAIR Jessie J 


G) ~ 





图 6-129 输入 文字 图 6-130 绘制 图 形 


14 为 图 层 添加 “内 阴影 ”“ 渐 变 辣 加 ”和 “投影 ”图 层 样式 ， 如 图 6-131 所 示 。 









































内 阴影 新 变 亚 加 投影 
结构 渐变 结构 
混合 模式 (6): 正常 ~ pm 混合 模式 (6): 正常 -nl 
不 透明度 O): 一 6 % ede 上 ”忠信 不 诅 明 度 (0): 一 5 2 % 
es 不 j (P): 一 10 % /A | 
角度 (A): | ”| 120 ” 度 加 使 用 全 局 光 (G) ee |<| F&A 角度 (A): (py 30 度 门 使 用 全 局 兴 (6) 
中 高 Dj): 一 了 你 i 距离 D): 人 一 2 人 素 
阴 赛 (0: 二 -一 1 一 % 样式 (0D): 线性 Y ”IY 与 图 层 对 褒 (1) 扩展 RQ): A 一 0 % 
5 i 大 小 3): :> 6 像素 
| 大 小 3): C= 一 0 像素 角度 (N): ( | | 90 度 于 
本 ; 缩放 (5): 5 100 % 等 高 线 :| -| 口 尖 人 上 (0 
等 高 线 : | -| 口 湖 杀 B 占 (0 一 
a 设置 为 默认 值  [ 揽 位 为 默认 值 | J - 
回 图 层 控 空 投影 (U) 
| 设置 为 默认 值 | | 复位 为 默认 值 | | 设置 为 默认 值 _| | 复位 为 默认 值 | 
































图 6-131 添加 图 层 样式 


15 执行 确定 操作 后 的 效果 如 图 ] 6 添加 图 片 并 输入 文字 ， 如 图 
6-132 所 示 。 6-133 所 示 。 


You MayAlso Like 


Sh 
Bo 
es 


Hit FM Radio Track Love Radio 9Sou| Music 





图 6-132 确定 后 的 效果 图 6-133 添加 图 片 并 输入 文字 
| i 绘制 息 形 并 添加 蒙 版 ， 在 蒙 | AN 在 最 上 方 添 加 状态 栏 的 文字 与 
版 中 拉 出 渐变 色 ， 效 果 如 图 图 片 ， 如 图 6-135 所 示 。 
6-134 所 示 。 
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00000 





Mlelle 
You May Also Like 





~ Bg 人 
so | FM a 


Hit FM Radi ove Radio Sou| Musi 














图 6-134 绘制 矩形 并 设置 蒙 版 效果 图 6-135 添加 状态 栏 | 


19 完成 界面 的 绘制 ， 然 后 用 同样 的 方法 绘制 出 子 界 面 ， 如 图 6-136 所 示 。 
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6-136 完成 制作 








下 面 介绍 天 气 APP 应 用 界面 的 设计 ， 图 6-137 所 示 为 制作 流程 图 。 
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图 6-137 制作 流程 图 


























9 


() | 使 用 “矩形 工具 ” () 为 图 层 添 加 “ 庆 () 单 击 “ 确 定 ” 按 
绘制 失 形 ， 如 图 2 钮 后 的 图 像 效 果 
Goes 式 ， 如 图 6-139 所 示 。 如 图 6-140 所 示 。 


渐变 县 加 
渐变 
混 言 模式 (0): 正常 M 仿 色 
不 透明 度 (p): 100 % 
浙 六 [| | fr) 
样式 (0): 线性 Y 加 与 图 层 对 齐 种 
角度 :| *， | 90 度 
缩放 (5): 100 








设置 为 默认 值 和 夏 位 为 默认 值 








6-138 绘制 矩形 6-139 添加 图 层 样式 6-140 确定 效果 
O04 使 用 绘图 工具 绘制 图 形 ， 并 使 用 “ 横 排 0) 品 继续 使 用 绘图 工具 绘制 
文字 工具 ”输入 文字 ， 如 图 6-141 所 示 。 图 形 并 输入 文字 ， 如 图 
6-142 所 示 。 


令 4:42 PM 


LONDON © 





6-141 绘制 图 形 并 输入 文字 6-142 绘制 图 形 并 输入 文字 


() 0 绘制 天 气 图 形 并 输入 文字 ， 如 () 网 继续 在 下 方 绘制 图 形 并 输入 文 
图 6-143 所 示 。 字 ， 如 图 6-144 所 示 。 


今 4:42 PM 
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令 4:42 PM 


Eee © 


AAALA 
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[else 人 





6-143 绘制 图 形 并 输入 文字 6-144 绘制 图 形 并 输入 文字 





() 在 界面 两 侧 继续 输入 文字 并 U9 冻 加 驼 版 ， 在 索 版 中 绘制 渐变 效 


2 9 Ge 果 ， 如 图 6-146 所 示 。 





6-145 输入 文字 并 绘制 圆 角 和 矩 形 6-146 绘制 蒙 版 


10 绘制 矩形 ， 并 设置 不 透明 度 为 7%， 然 后 复制 多 个 ， 如 图 6-147 所 示 。 





6-147 绘制 矩形 并 复制 多 个 


| | 用 同样 的 方法 为 左 、 右 边 绿 的 图 形 洪 加 聚 版 ,制作 渐变 效果 ， 如 图 6-148 所 示 。 





6-148 添加 蒙 版 效果 


Photoshop 创意 戎 pp。 元 来 设计 从 入 门 到 精通 






| 昌 使 用 “ 圆 角 卸 形 工具 ”绘制 圆 角 和 定形 ， 如 图 6-149 所 示 。 然 后 设置 图 层 填 充 为 0%， 
并 为 图 层 谎 加 “ 笠 面 和 浮雕 ”“ 外 及 光 ” 和 “投影 ”图 层 样 式 ， 如 图 6-150 所 示 。 






















































































睾 面 和 浮雕 外 发 光 投 
ee 样式 0D): 外 利 面 。 ~ Be 杀 尖 混合 模式 @)， 采光 ~ 国 
方法 Q): 平时 > 不 透明 度 (0): < 七 10 % 
和 透明度 (D): 7s 
nie LE ri 一 人 不 透明度 (0) A 4 
方向 :@@ 上 下 oa 国 二 ETIY| 角度 (A): | |) 135 度 回 使 用 全 局 光 (G) 
大 小 四: 室 10 像素 ~ 
软化 (F): Zz 16 ”像素 图 素 距离 {D): 30 ”像素 
阴影 方法 (Q): 柔和 ~ 扩展 (R): 4 0 % 
角度 (NV): 135 度 扩展 (P): 4 0 % 大 小 (5): 50 像素 
人 。 ) 口 使 用 全 局 光 (6) NS; 
并 二 褒 大 小 (5): 5 20 ”像素 品质 
和 品质 RE 本 
光泽 等 高 线 : [4 司 湖 外 占 (0 等 高 线 ; [A 回 水 从 记 占 (0 
高 光 模式 (H)， 源 色 和 二 | -| 局 消除 饮 占 QD 
杂 色 (N: 4 0 % 
不 透明 度 (0): 5 0 % 范围 R): 100 % OO 
阴影 昼 式 (A): 柔 光 ~ 国 国 拉动 0): 4 0 % 加 图 层 控 空 投影 (U) 
不 透明 度 (C): D100 % [ 设 5 TT 
了 二 设置 为 默认 值 | | 揽 位 为 默认 值 | 
[各 让 [有 位 为 默认 秆 设置 为 默认 值 | | 修 位 为 黑 认 值 _ 








图 6-149 绘制 圆 角 和 矩 形 图 6-150 添加 图 层 样 式 


Il 复制 图 层 ， 清 除 图 层 样式 ， 然 后 

双击 缩 上 略图 层 ， 修 改 填充 色 为 渐 = BE 
变 填充 ， 如 图 6-151 所 示 。 LONDON 
] 4 填充 效果 如 图 6-152 所 示 。 


:|| 


样式 tT): 蛙 性 ™ 
角度 (AY: 和 170 
簿 训 (5]: 100 | 号 


[| 展 向 (R 仿 色 (D) 
与 图 技 对 齐 由 ) 





图 6-151 渐变 填充 图 6-152 填充 效果 


Di A 
6-153 所 示 。 a gp rn 


| 6 设置 图 层 混合 模 A 
式 为 “和 柔 光 ”、 


不 透明 度 60%， 效 果 如 图 
6-154 所 示 。 


令 小 42 PM 229% m 上 


合 ) LONDON © 





图 6-153 绘制 图 形 6-154 效果 








Wy 继续 绘制 图 形 ， 如 图 
6-155 所 示 。 


] 设置 图 层 混合 模式 为 

3 
3%， 然 后 添加 图 层 莹 版， 在 聚 版 
中 填充 渐变 , 效果 如 图 6-156 所 示 。 


| 9 使 用 绘图 工具 在 手机 抵 部 绘 
图 形 ， nh 6-157 所 示 。 





全 4:42 PM 


| 
LONDON © 


图 6-155 绘制 图 形 图 6-156 修改 图 层 后 的 效果 


(| 在 上 方 绘制 圆 角 矩形 ， 并 设置 
填充 颜色 为 渐变 色 ， 如 图 6-158 
所 示 。 


今 4:42 PM 


LONDON 





图 6-157 绘制 图 形 


笠 面 和 浮 央 
样式 1): 内 射 面 ”~ 
方法 (Q) 雕刻 清晰 ~ 





深度 人 0): 一 Ey % 

方 癌 : 辐 上 局 下 

大 小 国 : 一 7 像素 

软化 (中: 全 2 像素 
阴影 

角度 Mi: 135 度 


(wn) | 


党 泽 等 高 续 : [ A 中 消除 锯 齿 册 ) 


高 活 模 式 (H): 前 色 奈 淡 -| 





不 透明 度 (O): [a ] 20 3 
阴影 模式 多 :正片 亚 底 ~ 图 国 
涉 透 明度 (C); ,全 Eee | % 


襄 秆 为 默认 值 野 位 为 默认 值 


图 6-159 单 击 按钮 











图 6-158 绘制 圆 角 和 珑 形 


Wl PA en 
然后 单 击 “ 光 泽 等 高 线 ” 选 项 
右 侧 的 三 角 按 钮 ， 如 图 6-159 中山 
作 在 展开 的 列表 中 选择 “ 锥 形 - 
反 转 ”选项 ， 如 图 6-160 所 示 。 
阴影 
角度 : 一， 135 度 


ip 」 回 使用 全 局 (6) 
高 度 : 30 度 


说 尝 竺 局 续 : | ] 消除 饥 齿 几 ) 
狼 - 





图 6-160 选择 “ 锥 形 - 反 转 ”选项 
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BA 


9 


由 四 执行 确定 操作 后 的 图 像 效 果 如 Wa 使 用 “ 圆 角 矩形 工具 ”绘制 圆 
ee G2 a 


图 6-161 所 示 。 


Am 本 0 | 
全 4:42 PM 229% 攻 | 全 4:42 PM 229% 四 ， 


LONDON 中 Eee OS 





图 6-161 确定 后 的 图 像 效果 图 6-162 绘制 圆 角 和 天 形 


几 品 绘制 三 个 同心 圆 ， 分 别 修改 颜色 ， 并 为 第 二 个 圆 的 添加 “内 发 光 ” 图 层 样式 ， 如 图 
6-163 所 示 。 然 后 使 用 “直线 工具 ”在 手机 屏幕 上 、 下 边缘 绘制 直线 , 如 图 6-164 所 示 。 





全 4:42 PM 


LONDON 





6-163 绘制 圆 6-164 绘制 直线 


人 设置 图 层 混合 模式 为 “ 柔 光 ”、 填 充 为 15%， 完 成 制作 ， 用 户 还 可 以 制作 其 导 
航 界 面 ， 如 图 6-165 所 示 。 


seec: TapTapldeas 守 4:42 PM 22% m0 “ee 4:42 PM 22% 0 


© LONDON 0) 


Sven Kaiser 


0 FRIENDS 


了 ) PLACES 
9 ACTIVITES 


C3 WEATHER 





6-165 完成 制作 


平 极 电脑 界面 的 绘制 与 手机 界面 的 绘制 相同 ， 唯 一 不 同 的 是 界面 的 大 小 ， 所 以 在 绘制 
前 需要 确定 尺寸 。 下 面 介绍 平板 电脑 音乐 APP 界面 的 设计 ， 图 6-166 所 示 为 制作 流程 图 。 


. 4 NS 
> - 各 
Be > \ 
a | ， 
所 SN 


|have a dream 
muUSen MUXX muUSsen MUXX 


图 6-166 制作 流程 图 


全 上部 上 入 于 :会 宙 中 加 天 和 
如 图 6-167 所 示 。 


图 6-167 绘制 矩形 


绘制 圆 角 和 矩形 ， 并 添加 系 材 ， 然 
后 创建 剪贴 索 版 ,如 图 6-169 所 示 。 





图 6-169 添加 素材 


使 用 “和 窍 形 工具 ”在 右 侧 绘 制 矩 
形 条 ， 如 图 6-171 所 示 。 


Uo 


. , “i 
. 沁 全 如 
2 r~ 
\ 
大 | 
AS 


|have a dream 
mIUSen MUXX 





图 6-171 绘制 矩形 条 


、 SS | 
S ’ ' 
ph ha NG 2 
必 | | a » J 
4 


|have a dream 


Muxx Music Player 


|have a dream 
muUsen MUXX 


4 Pp wi es 





2 
矩形 ， 如 图 6-168 所 示 。 


02 





图 6-168 绘制 矩形 


使 用 “ 横 排 文字 工具 ”输入 文字 ， 
如 图 6-170 所 示 。 


U4 


闻 光 本 油料 南 让 脱 


MUSeN MUXX 





图 6-170 输入 文字 


使 用 “ 横 排 文字 工具 ”输入 文字 ， 
如 图 6-172 所 示 。 


U6 


| have a dream 
But is only a dream 


| want to finish it 


os 
r : > MN 
E 了 But | don’t know 
本 How to do it 


|have a dream 
MUSeN MUXX 


I need your help 


We'll be coming back 





6-172 输入 文字 
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错 photoshop 创意 @ pb 元 素 设 计 从 入 门 到 精通 
更 穆 Ul 





0) M 绘制 圆 角 和 矩形， 如 图 6-173 所 
二 | 


bP |havea dream 
But its only a dream 


| want to finish it 


© ys ~ ~、 让 
人 ASE 2 大 三 一 
户 卫 EN | But | don’t know 
: > How to do it 
> BY 
=— 


|have a dream 
MUSEeN MUXX 


| need your help 


We'll be coming back 





图 6-173 绘制 图 形 


() 单 击 “确定 ”按钮 后 的 图 像 效 
末 如 图 6-175 所 示 。 


bP |havea dream 
But its only a dream 


| want to finish it 


人 ES 
国 由 -~ A i 
篇 | No But | don’t know 
> How to do it 
> NY 


|have a dream need your helr 
MUSEN MUXX 














图 6-175 确定 后 的 效果 


|] 1 使 用 绘图 工具 绘制 播放 控件 ， 
如 图 6-177 所 示 。 















Pb 1have a dream 


But its only a dream 


| want to finish it 


But | dont know 


How to do it 





|have a dream need vour help 
IMUSeN MUXX 


[DD Li bol 00:00 


6-177 绘制 播放 控件 


268 


(08 绘制 和 矩形， 设置 填充 为 30%， 
并 添加 “渐变 对 加 ”图 层 样 
式 ， 如 图 6-174 所 示 。 


渐变 亚 加 
渐变 
混合 模式 (D): 正常 v 岂 仿 色 
不 透明 度 (p)， zc 90 % 
渐变 : | | 回 反 向 (R) 
样式 (D): 线性 v ”IY 与 图 层 对 褒 (1) 
前 度 (N):| * | 90 度 


缩放 全): PN 150 % 














| 设置 为 默认 值 | | 复位 为 默认 值 | 











图 6-174 添加 “ 淘 变 症 加 ”图 层 样式 


10 使 用 “ 圆 角 矩形 工具 ”绘制 


出 角 和 矩形, 如 图 6-176 所 示 。 















bP |havea dream 
But its only a dream 


| want to finish it 


- x -“ e 
本 ， 世 se 
| 滩 当 | But | don't know 
Be How to do it 
> > NS 


NatsM we dream 
MUSEeN MUXX 





need your help 


图 6-176 绘制 圆 角 算 形 


| Wy 使 用 “ 圆 角 和 矩形 工具 ”在 上 方 


绘制 贺 角 和 矩形, 如 图 6-178 所 示 。 














bP |havea dream 
Dos But its only a dream 
c SS 9 
| 4 “Wy | want to finish it 
Ni ， > 
遇 
-| 泽 当 But | don't know 
六 How to do it 
need your help 


|have a dream 
MUSEN MUXX 





HM4 Pp ww 一 


6-178 绘制 圆 角 和 矩形 






















| 3 使 用 | 横 Wl 具 “ 输 Muxx Music Player 


Pp |havea dream 


入 文字 ， 并 绘制 三 个 圆 ， 
完成 效果 如 图 6-179 所 示 。 


But its only a dream 





| want to finish it 


E | But | don't know 
NS 
How to do it 
: N 


| have a dream | need vour help 
IMUSeN MUXX 


HM4 Pp Pl = 


图 6-179 完成 效果 


\CIEEB 手机 主题 APP 界面 


手机 可 以 改变 主题 ， 使 界面 变 得 多 样 化 ， 锁 屏 界 面 、 主 界面 都 会 随 之 改变 。 主 题 一 般 
以 一 个 风格 进行 图 标 、 按 钮 、 文 字 的 设计 。 本 市 绘制 的 手机 主题 界面 如 图 6-180 所 示 。 





a WEE BEE 
图 6-180 手机 主题 界面 

《 风 锁 屏 界面 设计 

下 面 介绍 锐 屏 界面 的 制作 ， 图 6-181 所 示 为 制作 流程 图 。 





图 6-181 制作 流程 图 
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photoshop 创意 @ pb 元 素 设 计 从 入 门 到 精通 





() 2 ee () 在 瞧 方 终 制 乞 形 为 状态 栏 唱 加 
档 中 作为 背景 , 如 图 6-182 所 示 。 绘制 图 标 、 输 入 文字 ， 如 图 


6-183 所 示 。 





09:56 AM 





6-182 添加 素材 


() 3 使 用 “ 横 排 文字 工具 ”输入 文字 ， 
如 图 6-184 所 示 。 
() /| 添加 素材 图 片 , 如 图 6-185 所 示 。 






09:56 AM 


6-185 添加 素材 图 片 


(})D 继续 添加 素材 图 片 ， 如 图 6-186 
所 示 。 

UO 在 素材 上 绘制 图 形 ， 如 图 6-187 
所 示 。 





图 6-186 添加 素材 图 片 6-187 绘制 图 形 








() 为 第 一 个 图 层 添加 “内 阴影 ” 
图 层 样 式 ， 如 图 6-188 所 示 。 


内 阴影 
结构 


混合 模式 人 @): 正片 登 斌 ~ 国 国 


不 透明 度 (0): 一 一 38  % 
角度 (A): | we |) 120 ” 度 园 使 用 全 局 光 (G) 
距离 OO): Fe 5 像素 




















阳 赛 QO: 一 0% 

大 小 (5): = 5 像素 
品质 

等 高 线 [A 消除 锯 占 中 

隶 色 NI 0 % 


设置 为 默认 值 复位 为 默认 值 











6-188 添加 图 层 样 式 


拷贝 a 
并 分 列 修改 里 面 的 闫 色 ， 


Dowlh 


如 图 6-190 py 






































内 阴影 
结构 
混合 模式 (6): 正片 县 底 ~ 国 国 
不 透明 度 (0): 国 |% 
角度: ( i 120 ” 度 团 使 用 全 局 光 (G) 
距 高 D): FT 5 像素 
阻塞 (0: 0  % 
sl 5 像素 
一 品质 
| 4- 消除 锯 具 人) 
杂 色 (N): 4 0 % 
[设置 为 默认 值 。| | 复位 为 默认 值 














6-190 修改 颜色 


11 
] 2 


设置 组 的 不 透 





图 6-192 复制 效果 





分 别 设置 三 个 图 层 的 不 透明 度 为 85%、70%、50%， 将 
明度 为 60%。 然 后 复制 三 


完成 锁 屏 界面 的 绘制 ， 如 图 
6-193 所 示 。 


执行 确定 操作 后 的 图 像 效 果 
如 图 6-189 所 示 。 


Us 





6-189 图 像 效果 


绘制 三 个 圆 ， 如 图 6-191 所 示 。 


1 0 





6-191 绘制 圆 


三 个 图 层 放置 在 一 个 组 中 ， 
I 与 方向 ,如 图 6-192 所 示 。 


09:56 AM 99% [Eh 





图 6-193 完成 绘制 
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photoshop 创意 戎 pp 元 素 设 计 从 入 门 到 精通 





全 图 标 设计 
在 绘制 主 界面 前 需要 设计 出 图 标 样式 ， 图 6-194 所 示 为 制作 流程 图 。 


国 FC 


图 6-194 制作 流程 图 


(| 使 用 绘图 工具 绘制 图 形 ， 如 图 () 为 图 层 添加 “ 描 边 ”样式 ， 如 
6-195 所 示 。 图 6-196 所 示 。 





描 边 - 
一 结构 
大 小 (9): 四 =: 5 像素 

位 置 P): 居中 
混合 模 忒 (6): 正常 
不 透明 度 (0): 10  % 

















”填充 类 型 F): 颜色 ~ 
颜色: 国 国 








设置 为 默认 值 复位 为 默认 值 
6-195 绘制 图 形 图 6-196 添加 “ 描 边 ”样式 


() 3 执行 确定 操作 后 的 图 像 效 果 如 图 6-197 所 示 。 继 续 绘制 图 形 ， 如 图 6-198 所 示 。 
然后 用 同样 的 方法 绘制 图 形 ， 效 果 如 图 6-199 所 示 。 

















图 6-197 确定 后 的 效果 6-198 继续 绘制 图 形 图 6-199 绘制 效果 
() /| 继续 使 用 绘图 工具 绘制 图 形 ， () 为 图 形 绘制 高 光 效 果 ， 即 完成 
如 图 6-200 所 示 。 一 个 图 标的 绘制 ， 如 图 6-201 


所 示 。 








图 6-200 绘制 图 形 图 6-201 完成 图 标的 绘制 


四 TB 日 





Ob 用 同样 的 方法 绘制 其 他 图 标 ， 如 图 6-202 
所 示 。 到 *] 不 肖 明 度 : [i00%| ~ 











07 在 “图 层 ” 面 板 中 将 不 同 的 图 标 放置 在 相应 ee 
组 中 ， 如 图 6-203 所 示 。 


























国 区 二 有 加 








图 6-202 绘制 其 他 图 标 图 6-203 放置 在 组 中 
交 主 界面 设计 
下 面 介绍 主 界面 的 绘制 ， 在 绘制 主 界面 前 可 以 对 主页 的 天 气 插 件 进行 单独 绘制 ， 
是 放置 在 一 起 绘制 的 。 图 6-204 所 示 为 绘制 流程 图 。 


09:56 AM 


oR 


2 /22 


09:56 AN 


09:86 


a 





6-204 绘制 流程 图 


2 











机 | 


所 示 。 


0 


03 


| 


打开 锁 屏 界面 ， 将 其 另 
I a 
然后 将 其 他 图 层 删 除 ， 如 图 6-205 


使 用 “ 圆 角 和 窍 形 工具 ” 
绘制 一角 矩形， 如 图 6-206 所 示 。 


“外 发 光 ” 和 “投影 ” 





图 6-205 删除 图 层 后 





09:56 AM 


6-206 绘制 圆 角 和 矩 形 


修改 不 透明 上 度 为 60%, 然后 双击 进入 “图 层 样式 ”对 话 框 , 添加 “斜面 和 浮雕 ”“ 内 


样式 ,| 如 图 .6-207 所 示 。 








和 斜面 和 浮雕 
结构 
样式 MD): 内 介面 
方法 (Q): 平滑 元 
深度 D): 100 % 


| ， 上 回 使 用 全 局 光 (G) 
30 度 





口 消除 锯齿 

高 光 模式 (H): 源 色 -| | 
不 透明 度 (0): = 二 75 % 
阴影 异 式 (A): 正片 县 底 ~ 国 国 
不 透明 度 (0): 一 2 82  % 


[设置 为 默认 值 | | 揽 位 为 默认 值 | 

















一 结构 


内 发 光 一 





混合 模式 (6): 滤 色 M 
不 透明 度 (D): = 75 % 


隶 色 NG 0 % 


e DD or 





一 外 发 光 一 
一 结构 
混合 模式 (E): 滤 色 ~ 
不 透明 度 (0): = 75 % 





一 图 素 - 


投影 
结构 


混合 模式 (6): 正片 县 底 ~ 国 国 
不 透明 度 (0): 一 88  % 
角度 (A): 【100 度 回 使 用 全 局 光 人 




















方法 (Q): 柔和 

源 :日 居中 人 E) 回 边缘 (G) 
阻塞 O: CG 一 琶 0 % 
大 小 6): 一 一 27 ”像素 





中 高 D): 一 加” 像素 
扩展 QR): == 0 % 
大 小 (5): = 21 像素 


一 品质 














品质 

















等 高 线 : [A 消 用 所 占 () 


范围 R): 一 50  % 
拉动 0): = 0 % 











等 高 线 : [A 口 泣 $ 锯 贞 
范围 RQ): 一 50 % 
拉动 0): 0 % 




















| 设置 为 默认 值 _] | 复位 为 默认 值 | 














[设置 为 默认 值 | | 复位 为 默认 值 | 








等 高 线 : [A 湖绿 遍 占 (D 


杂 色 (N): (= 0 % 


可 图 层 挖 空 投影 (JU) 
[设置 为 默认 值 。] [ 复位 为 默认 值 | 
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图 6-207 添加 图 层 样式 


执行 确定 操作 后 的 图 像 效果 
如 图 6-208 所 示 。 


图 6-208 确定 后 的 图 像 效果 


00 


6-210 所 示 。 


使 用 “ 模 排 文字 工具 ”输入 
文字 ， 并 绘制 图 形 ， 如 图 


0 





O07 


新 建 图 层 ， 绘 制 高 光 ， 如 图 
6-209 所 示 。 
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6-209 绘制 高 光 


使 用 “ 李 圆 工具 ”在 下 方 绘 
制 几 个 圆 点 ,如 图 6-211 所 示 。 
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09:§6 


2014/03/22 
星期 四 





图 6-210 输入 文字 并 绘制 图 形 图 6-211 绘制 圆 点 
UN 将 前 面 绘 制 的 图 标 拖 入 到 界面 最 下 方 ， 即 完成 了 主 界 面 的 绘制 ， 如 图 6-212 
所 示 。 


U9 保存 后 可 以 制作 第 二 个 界面 效果 ， 将 图 标 拖 入 后 进行 对 齐 排 列 即 可 ， 如 图 
Gr Uae 
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6-212 完成 绘制 6-213 第 二 个 界面 效果 












oe APP UI 设计 师 必 (得 





IE APP 界面 切 图 命名 和 文件 整理 规范 


切 图 命名 的 英文 缩写 的 三 个 原则 如 下 。 


2 








photoshop 创意 移 pb 元 素 设 计 从 入 门 到 精通 





人 DO。 较 短 的 单词 可 通过 去 掉 “ 元 音 ” 形 成 缩写 
© 袍 长 的 单词 可 取 单词 的 头 几 个 字母 形成 绒 写 


名 此 外 还 有 一 些 约定 成 俗 的 英文 单词 缩写 





iOS 系统 APP 界面 设计 的 切 图 命名 规范 如 图 6-214 所 示 。 


= 启动 界面 : 


defoult.png (启动 图 片 ) 
defoult_logo.png 《启动 logo) 


如 : defoult.png\defoult@2x.png\de- 
foult-720@2x.png 


PS: 同 一 区 域 按钮 切 图 大 小 一 致 de- 
foult@2x.png\defoult-720@2x.png 为 IOS 命 名 


(-720 适 配 720px 宽 ) 
-|| 。 导航 栏 按钮 : 

SD 9 
nav_ (功能 描述 ) .png 
如 : nav_menu.png\nav_menu_pre.png 
(同一 按钮 选中 前 后 两 种 状态 命名 ) 
PS: 同 一 区 域 按钮 切 图 大 小 一 致 

se 菜单 按钮 : 


tab_ (功能 描述 ) .png 


如 : tab_set.png\nav_set_pre.png 
(设置 ) 


一 列表 页 
list_ (功能 属性 + 描述 ) .png 


如 : list_menu_collect.png 
列表 页 收藏 按钮 ) 


图 6-214 iOS 系统 APP 界面 设计 的 切 图 命名 规范 


CEBEB APP 设计 师 必 若 的 用 户 注 验 十 大 原则 


@ 流程 图 是 一 切 工作 的 基础 
pa ha APP 也 要 有 一 


login_bg.png (登录 背景 ) 
login_logo.png (登录 logo) 
login_input.png (输入 框 ) 
login_input_pre.png (输入 框 选中 状态 
) 

Login_btn.png (登录 按钮 ) 
Login_btn_pre.png (登录 按钮 选中 
状态 ) 


PS:android 下 input、btn、list 等 图 片 
可 用 .9.png 格 式 图 片 


左 侧 导 航 : 
leftbar_ (功能 描述 ) .png 


如 :leftbar_info.pngNleftbar_info_pre.png 
(个 人 中 心 ) 


主页 面 : 
Home (界面 名 称 ) _ (功能 属性 简写 + 描述 ) .png 


如 : home_btn_recommended.png 
(热门 推荐 ) 


PS: 描 述 可 用 英文 或 拼音 开头 的 字母 组 合 等 。 


部 分 功能 属性 简写 : 

按钮 : btn 按钮 文字 : btntext 复 选 框 : chb 
背景 : bg 单 选 按钮 : rb 下 拉 : cbb 
输入 : ip 


可 重复 使 用 按钮 : 
btn_ (功能 属性 或 色彩 均 可 ) .png 


如 : btn_blue.png /btn_blue.9.png 
( 蓝 色 按钮 ) 


| 个 思虑 周全 的 流程 图 ， 以 确保 它 有 合乎 逻辑 的 、 


理 的 导航 结构 。 男 一 点 就 是 要 确保 核心 功能 所 在 的 屏幕 位 于 上 层 ， 而 不 是 被 埋 、 Wu ul 


般 元 素 之 下 。 
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加 设计 师 要 明确 把 握 自己 的 分 工 

设计 师 创 建 的 每 一 个 细节 都 要 经 过 开发 者 才能 变 得 活灵活现 ， 花 几 个 小 时 和 花 几 天 时 
间 所 做 出 的 设计 和 更改 对 APP 功能 的 影响 是 截然 不 同 的 。 

(6 罗 避免 使 用 位 图 和 低 分 辨 率 的 图 片 

一 般 而 言 ， 设 计 首 先是 为 视网膜 显示 屏 、 高 分 辨 率 的 显示 屏 设 计 ， 然 后 按 比 例 缩减 。 
更 好 的 做 法 是 使 用 矢量 图 形 进行 设计 ， 而 不 是 使 用 位 图 或 者 栅 格 图 像 。 

@ 畏 点 击 区 域 设 置 要 合理 

大 多 数 用 户 的 食指 宽 1.6~2 cm(44~58 px)。 在 设计 时 要 考虑 到 手指 的 宽度 ， 而 且 用 
户 在 快速 移动 手指 的 时 候 很 难 准确 地 点 击 小 片 屏幕 。 在 屏幕 上 加 大 量 的 按钮 和 功能 很 容易 ， 
但 按钮 一 定 要 足够 大 ， 间 隔 也 要 足够 大 ， 否 则 用 户 容易 误 点 。 

@ 介绍 动画 的 设计 要 精细 

如 果 打 算 使 用 介绍 动画 ， 那 么 要 让 动画 时 间 尽 可 能 短 ， 让 设计 尽 可 能 精细 以 及 足够 吸 
引 人 ， 值 得 用 户 花费 时 间 等 待 。 在 APP 加 载 过 程 中 会 先 展现 图 片 ， 再 过 渡 至 动画 ， 要 确 
保 这 个 过 渡 是 平滑 的 、 贴 切 目 然 的 。 

( 弹 给 用 户 一 个 加 载 提示 设计 

APP 加 载 时 间 过 长 很 容易 让 用 户 以 为 出 现 了 什么 故障 ， 也 会 带 来 粮 糕 的 用 户 体验 。 
在 APP 加 载 的 时 候 不 要 让 用 户 看 到 空白 的 屏幕 ， 使 用 加 载 指示 条 或 者 小 动画 让 用 户 知道 
APP 处 于 正常 运行 当中 ， 如 果 能 加 入 一 个 加 载 进 度 指示 条 就 更 好 了 。 

(0 不 同 的 操作 系统 要 有 不 同 的 设计 

不 同 的 移动 操作 系统 (如 iOS、Android 和 WPh7) 有 迎 异 的 审美 观 ， 开 发 者 需要 认真 
学 习 各 操作 系统 的 人 机 界面 指南 ， 做 好 不 同 版 本 APP 的 移植 工作 ， 不 要 让 用 户 迷 茫 和 不 
适应 。 

( 漳 在 高 密度 像素 屏幕 上 禁止 填充 过 多 的 信息 或 UI 组 件 

充 塞 了 很 多 信息 或 者 UI 组 件 的 界面 会 显得 非常 杂乱 ， 并 且 难 以 有 效 导 航 ， 更 会 影响 
界面 上 主要 功能 的 展现 。 

(@ 久 可 用 性 测试 的 必要 性 

可 用 性 测试 是 必须 的 ， 不 管 APP 看 起 来 多 么 好 ， 都 要 找 值 得 信任 的 人 ( 或 者 有 经 验 
的 设计 师 ) 进行 小 沁 围 封闭 测试 ， 在 公开 发 布 之 前 更 新 一 下 界面 。 另 一 个 简单 易 行 地 获得 
用 户 反馈 的 方法 是 在 分 类 网 站 张贴 广告 招募 合适 的 人 进行 焦点 小 组 测试 。 

My 不 要 忘记 手势 功能 ， 但 不 要 小 

不 要 忘记 手势 功能 但 也 不 能 滥用 ， 通 常 要 避免 通过 使 用 手势 功能 进入 菜单 。 
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本 书 是 一 本 专门 介绍 使 用 Photoshop 设计 制作 APP 元 素 的 图 书 。 全 
书 分 为 6 章 ， 每 章 都 包含 丰富 的 APP 设计 知识 和 设计 制作 过 程 的 详细 讲解 ， 
包括 APP UI 元素 设计 基础 、APP 图 标 设计 、APP 按钮 设计 、APP 导航 设计 、 
APP 其 他 界面 元 素 设 计 和 APP 整体 框架 界面 设计 ， 通 过 案例 逐一 讲解 ， 使 
读者 由 浅 及 深 逐 步 地 了 解 使 用 Photoshop 进行 APP 设计 的 整体 设计 思路 和 
制作 过 程 。 

本 书 将 APP UI 元 素 设计 的 相关 理论 与 实例 操作 相 结 合 ， 不 仅 能 使 读 
者 学 到 专业 知识 ， 也 能 在 实例 操作 中 掌握 实际 应 用 ， 从 而 全 面 掌握 APP UI 
的 元 素 设 计 方 法 。 本 书 适合 广大 APP UI 设计 师 想 从 事 或 转型 为 APP UI 设 
计 师 的 相关 人 员 ， 大 中 专 相 关 专 业 院 校 师 生 ， 以 及 广大 平面 设计 爱好 者 ， 
希望 通过 对 本 书 的 深入 学 习 ， 可 以 让 广大 读者 的 设计 水 平 更 上 一 层 楼 。 
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简单 修 图 : 1 分 钟 的 视觉 改变 Lightroom 完 美 行 摄 旅 图 





PhoeioshopE& 
信人 ae - 
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Photoshop CC 从 入 门 到 精通 Photoshop CC 数码 照片 处 
( 第 2 版 ) 理 从 入 门 到 精通 ( 第 2 版 ) 





PHOTOSHOP CC 完美 广告 Photoshop APP UI 设计 
设计 与 技术 精粹 ( 第 2 版 ) 从 入 门 到 精通 





AutoCAD 2014 


从 入 门 到 精 邓 


Te ws 9 





:AutoCAD 20 
om 














中 文 版 AutoCAD 2014 从 入 门 到 “中文 版 AutoCAD 2014 机 械 设 计 
精通 : 实战 案例 版 ( 第 2 版 ) 从 入 门 到 精通 ( 实战 案例 版 ) 


随 着 用 户 对 智能 手机 APP 需 求 不 断 欧 升 ， 各 大 企业 纷纷 成 之 了 独立 的 UI 设 计 部 


门 ， 相 应 产生 了 巨大 的 人 才 缺 口 。 本 书 旨 在 帮助 读者 在 了 解 APP 元 泰 制作 的 同时 ， 
掌握 其 效果 特点 和 设计 技巧 ， 从 而 更 好 地 适应 新 形势 下 的 行业 需求 。 





道 吗 ? 





不 同类 型 /和 元 素 的 | 


同类 型 APP 控 件 元 素 ( 如 
图 标 ) ， 可 以 分 为 立体 、 
Sy 线性 、 拟 物 等 多 种 










| 功效 区 分 a 
图 效果 差异 

不 同 元 素 或 同一 元 素 在 界 

面 的 不 同位 置 ， 其 功能 也 

人 

为 中 底 癌 本 

导航 和 项 部 导航 。 到 目 系 本 
元 素 如 何 适 配 安 卓 /人 
果 的 不 同 机 型 ， 以 及 在 
两 者 之 间 进 行 移植 ， 这 
在 设计 规范 、 分 辩 率 、 
尺寸 字体、 功能 与 内 
容 、 切 图 等 多 方面 有 着 
较 大 差异 。 

一 ”风格 多 变 

元 素 的 风格 受到 APP 类 型 、 

不 同 平台 和 设计 理念 等 多 方 编 ) 质感 体现 

立体 化 写实 拟 和 化 为 基本 mm 

rer ' ee me py Nee 

风格 ,和 这 些 又 可 以 进一步 及 个 功能 设计 出 不 同 

细 分 为 更 多 类 别 ， 如 局 平 化 质感 ， 如 糖果 质感 、 木 

细 分 为 常规 扁平 化 、 长 投影 头 纹理 、 金 属 质感 ， 以 

扁平 化 、 投 影 扁平 化 、 渐 变 及 发 光 效果 等 。 
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